"use client";
import React, { useEffect, useMemo, useState } from "react";
import DataTable from "react-data-table-component";
import { Input, Label } from "reactstrap";
import { MostRemindedInvoicesTableColumns, } from "@/Data/Application/Invoices/InvoicesDataSource";
import { useAppDispatch } from "@/Redux/Hooks";
import { setLoading } from "@/Redux/Reducers/LayoutSlice";
import DataService from "@/Config/Axios";
import { InvoiceInitialValue } from "@/Types/InvoiceType";

const MostRemindedDataTable = () => {
  const [filterText, setFilterText] = useState("");
  const dispatch = useAppDispatch();
  const [invoicesTableData, setInvoicesTableData] = useState<any>([])
  const filteredItems = invoicesTableData.filter((item: any) => {
    return Object.values(item).some(
      (value) =>
        value &&
        value.toString().toLowerCase().includes(filterText.toLowerCase())
    );
  });
  const callApi = async () => {
    dispatch(setLoading(true))
    try {
      const response = await DataService.post('/invoices')
      console.log(response)
      // let sortedData = response.data.data.sort((a: InvoiceInitialValue, b: InvoiceInitialValue) => b.remindersCount - a.remindersCount);
      // console.log(sortedData)
      setInvoicesTableData(response.data.data)
      dispatch(setLoading(false))
    } catch (error) {
      dispatch(setLoading(false))
      console.log(error)
    }

  }
  useEffect(() => {
    callApi();
  }, [])
  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]);

  return (
    <>
      <br />
      <div className="list-product">
        <div className="table-responsive">
          <DataTable
            className="custom-scrollbar"
            data={filteredItems}
            columns={MostRemindedInvoicesTableColumns}
            striped
            highlightOnHover
            pagination
            selectableRows
            subHeader
            subHeaderComponent={subHeaderComponentMemo}
          />
        </div>
      </div>
    </>
  );
};

export default MostRemindedDataTable;