"use client";
import React, { useEffect, useMemo, useState } from "react";
import DataTable from "react-data-table-component";
import { Card, CardBody, Col, Input, Label, Row } from "reactstrap";
import DataService from "@/Config/Axios";
import { ReminderSessionTableColumns, SentReminderSessionTableColumns } from "@/Data/Application/Reminders/ReminderSessionDataSource";
import { BounceLoader } from "react-spinners";
import { useParams } from "next/navigation";
import { getFormattedDate } from "@/utils/Constants";
import { ClientsTableColumns } from "@/Data/Application/Clients/ClientsDataSource";
import CommonCardHeader from "@/CommonComponent/CommonCardHeader";

const RemindersSessionDataTable = () => {
  const [filterText, setFilterText] = useState("");
  const [clientFilterText, setClientFilterText] = useState("");
  const [reminder, setReminder] = useState<any>()
  const [invoicesTableData, setInvoicesTableData] = useState<any>([])
  const [clients, setClients] = useState<any>([])
  const [loading, setloading] = useState(false)
  const params = useParams()
  const filteredItems = invoicesTableData.filter((item: any) => {
    return Object.values(item).some(
      (value) =>
        value &&
        value.toString().toLowerCase().includes(filterText.toLowerCase())
    );
  });
  const callApi = async () => {
    setloading(true)
    try {
      const response = await DataService.post(`/reminders/details/${params.id}`)
      console.log(response)
      console.log(response?.data?.data?.invoices)
      const { data } = response.data
      setReminder(data)
      const invoicesRecords = data.invoices.map((inv: any) => ({ ...inv.id }))
      console.log(invoicesRecords, "Invoice Records")
      setClients(data.clients)
      setInvoicesTableData(invoicesRecords)
      setloading(false)
    } catch (error) {
      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]);
  const clientsSubHeaderComponentMemo = useMemo(() => {
    return (
      <div className="dataTables_filter d-flex align-items-center">
        <Label className="me-2">Search:</Label>
        <Input
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            setClientFilterText(e.target.value)
          }
          type="search"
          value={clientFilterText}
        />
      </div>
    );
  }, [clientFilterText]);

  return (
    <>
      <Card>
        <CardBody>
          <Row className="row">
            <Col>
              <b>Reminder Number:</b>
            </Col>
            <Col>
              {reminder?.reminderCode}
            </Col>
            <Col>
              <b>Date Created:</b>
            </Col>
            <Col>
              {getFormattedDate(reminder?.createdAt)}
            </Col>
            <Col>
              <b>Invoices Count:</b>
            </Col>
            <Col>
              {invoicesTableData?.length}
            </Col>
          </Row>
        </CardBody>
      </Card>
      {
        reminder?.type == 'clients' &&
        <>
          <CommonCardHeader title="Clients" />
          <br />
          <Card>
            <CardBody>
              <div className="list-product">
                <div className="table-responsive">
                  <DataTable
                    className="custom-scrollbar"
                    data={clients}
                    columns={ClientsTableColumns}
                    striped
                    highlightOnHover
                    pagination
                    selectableRows
                    subHeader
                    subHeaderComponent={clientsSubHeaderComponentMemo}
                    progressPending={loading}
                    progressComponent={
                      <BounceLoader className="py-5" color="#36d7b7" />
                    }
                  />
                </div>
              </div>
            </CardBody>
          </Card>
        </>
      }
      <CommonCardHeader title="Invoices" />
      <br />
      <Card>
        <CardBody>
          <div className="list-product">
            <div className="table-responsive">
              <DataTable
                className="custom-scrollbar"
                data={filteredItems}
                columns={reminder?.isReminded ? SentReminderSessionTableColumns : ReminderSessionTableColumns}
                striped
                highlightOnHover
                pagination
                selectableRows
                subHeader
                subHeaderComponent={subHeaderComponentMemo}
                progressPending={loading}
                progressComponent={
                  <BounceLoader className="py-5" color="#36d7b7" />
                }
              />
            </div>
          </div>
        </CardBody>
      </Card>
    </>
  );
};

export default RemindersSessionDataTable;