'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 { InvoicesFilterHeader } from "../FilterHeader";
import { InvoicesTableColumns } from "@/Data/Application/Invoices/InvoicesDataSource";
import DataService from "@/Config/Axios";
import { BounceLoader } from "react-spinners";
import { InvoiceRowDataProp } from "@/Types/InvoiceType";

const ClosedInvoicesDataTable = () => {
    const [openAmount, setOpenAmount] = useState('');
    const [invoiceNumber, setInvoiceNumber] = useState<string>("");
    const [filterText, setFilterText] = useState("");
    const [closedInvoicesTableData, setClosedInvoicesTableData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [totalAmount, setTotalAmount] = useState('');

    const filteredItems = closedInvoicesTableData.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 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/closed')
            console.log(response)
            const sortedData = response.data.data
            // .sort(
            //     (a: any, b: any) => a.clientId.firstName.localeCompare(b.clientId.firstName)
            // );
            setClosedInvoicesTableData(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 ClosedInvoicesDataTable;