'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";
import { useParams } from "next/navigation";

const ClosedInvoicesDataTable = () => {
    const params = useParams()
    const [filterText, setFilterText] = useState("");
    const [loading, setloading] = useState(true)
    const [closedInvoicesTableData, setClosedInvoicesTableData] = useState([])
    const filteredItems = closedInvoicesTableData.filter((item: InvoiceRowDataProp) => {
        console.log(Object.values(item), "Searchable Item")
        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', { admin: params.id })
            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">
                            <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;