'use client'
import React, { useEffect, useMemo, useState } from "react";
import DataTable from "react-data-table-component";
import { Col, Container, Input, Label, Row } from "reactstrap";
import { CollapseFilterData } from "../FilterData";
import { InvoicesTableColumns } from "@/Data/Application/Invoices/InvoicesDataSource";
import DataService from "@/Config/Axios";
import { BounceLoader } from "react-spinners";
import { InvoiceRowDataProp } from "@/Types/InvoiceType";
import { InvoicesFilterHeader } from "../FilterHeader";


const OpenInvoicesDataTable = () => {
    const [openAmount, setOpenAmount] = useState('');
    const [invoiceNumber, setInvoiceNumber] = useState('');
    const [filterText, setFilterText] = useState("");
    const [openInvoicesTableData, setOpenInvoicesTableData] = useState([])
    const [totalAmount, setTotalAmount] = useState('');
    const filteredItems = openInvoicesTableData.filter((item: InvoiceRowDataProp) => {
        if (openAmount !== '' && !item.pending?.toString().includes(openAmount)) {
            return false;
        }

        if (invoiceNumber !== "" && !item?.clientInvoiceNumber?.includes(invoiceNumber)) {
            return false;
        }

        if (totalAmount !== '' && !item.total?.toString().includes(totalAmount)) {
            return false;
        }

        if (
            item.clientId.firstName.toLowerCase().includes(filterText.toLowerCase()) ||
            item.clientId.lastName.toLowerCase().includes(filterText.toLowerCase())
        ) {
            return true
        }
        return Object.values(item).some(
            (value) => value &&
                value
                    .toString()
                    .toLowerCase()
                    .includes(filterText.toLowerCase())
        )
    });
    const [loading, setloading] = useState(true)
    const subHeaderComponentMemo = useMemo(() => {
        return (
            <div className="dataTables_filter d-flex align-items-center">
                <Label className="me-2">Search:</Label>
                <Input onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFilterText(e.target.value)} type="search" value={filterText} />
            </div>
        );
    }, [filterText]);

    const callApi = async () => {
        setloading(true)
        try {
            const response = await DataService.post('/invoices/status/open')
            console.log(response)
            const sortedData = response.data.data
            // .sort(
            //     (a: any, b: any) => a.clientId.firstName.localeCompare(b.clientId.firstName)
            // );
            setOpenInvoicesTableData(sortedData)
            setloading(false)
        } catch (error) {
            setloading(false)
            console.log(error)
        }

    }
    useEffect(() => {
        callApi();
    }, [])

    return (
        <>
            <Container fluid>
                <Row className="py-4">
                    <Col sm="12">
                        <div className="list-product-header">
                            <InvoicesFilterHeader data={filteredItems} />
                            <CollapseFilterData
                                openAmount={openAmount}
                                setOpenAmount={setOpenAmount}
                                invoiceNumber={invoiceNumber}
                                setInvoiceNumber={setInvoiceNumber}
                                totalAmount={totalAmount}
                                setTotalAmount={setTotalAmount} />
                        </div>
                        <div className="list-product">
                            <div className="table-responsive">
                                <DataTable
                                    className="custom-scrollbar"
                                    data={filteredItems}
                                    columns={InvoicesTableColumns}
                                    striped
                                    highlightOnHover
                                    pagination
                                    // selectableRows
                                    subHeader
                                    subHeaderComponent={subHeaderComponentMemo}
                                    progressPending={loading}
                                    progressComponent={<BounceLoader className="py-5" color="#36d7b7" />} />
                            </div>
                        </div>
                    </Col>
                </Row>
            </Container>
        </>

    );
};

export default OpenInvoicesDataTable;