import UseStoreFilter from "@/Hooks/useStoreFilter";
import { loadAllAccount } from "@/redux/rtk/features/account/accountSlice";
import { DatePicker } from "antd";
import dayjs from "dayjs";
import moment from "moment";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import Card from "../../UI/Card";
import {
  clearTransactionList,
  loadAllTransaction,
} from "../../redux/rtk/features/transaction/transactionSlice";
import CreateDrawer from "../CommonUi/CreateDrawer";
import TableComponent from "../CommonUi/TableComponent";
import UserPrivateComponent from "../PrivacyComponent/UserPrivateComponent";
import AddTransaction from "./AddTransaction";

const GetAllTransaction = () => {
  const dispatch = useDispatch();
  const { list, total, loading } = useSelector((state) => state.transactions);
  const { list: accounts } = useSelector((state) => state.accounts);
  const { RangePicker } = DatePicker;
  const { storeFilter } = UseStoreFilter();
  const [pageConfig, setPageConfig] = useState({
    page: 1,
    count: 10,
    status: "true",
    startDate: moment().startOf("month").format("YYYY-MM-DD"),
    endDate: moment().endOf("month").format("YYYY-MM-DD"),
  });
  const columns = [
    {
      id: 1,
      title: "ID",
      dataIndex: "id",
      key: "id",
      render: (id) => <Link to={`/admin/transaction/${id}`}>{id}</Link>,
      renderCsv: (id) => id,
      responsive: ["xs"],
    },
    {
      title: "Store",
      dataIndex: "store",
      key: "store",
      render: (store) => store?.name,
      renderCsv: (store) => store?.name,
      responsive: ["sm"],
    },
    {
      id: 2,
      title: "Date",
      dataIndex: "date",
      key: "date",
      render: (date) => moment(date).format("ll"),
      renderCsv: (date) => moment(date).format("ll"),
      responsive: ["xs"],
    },

    {
      id: 3,
      title: "Debit Account",
      dataIndex: "debit",
      key: "debit",
      render: (debit) => debit?.name,
      renderCsv: (debit) => debit?.name,
      responsive: ["md"],
    },

    {
      id: 4,
      title: "Credit Account",
      dataIndex: "credit",
      key: "credit",
      render: (credit) => credit?.name,
      renderCsv: (credit) => credit?.name,
      responsive: ["md"],
    },

    {
      id: 5,
      title: "Amount",
      dataIndex: "amount",
      key: "amount",
      responsive: ["xs"],
    },
    {
      title: "Type",
      dataIndex: "type",
      key: "type",
      responsive: ["sm"],
    },
    {
      id: 6,
      title: "Particulars",
      dataIndex: "particulars",
      key: "particulars",
      responsive: ["lg"],
    },
  ];
  const filters = [
    storeFilter,
    {
      key: "debitId",
      label: "Debit A/C",
      type: "select",
      options: accounts?.map((item) => {
        return {
          label: item?.name,
          value: item?.id,
        };
      }),
      className: "min-w-[100px] max-w-[150px] w-full sm:w-auto",
      popupClassName: "w-[200px]",
    },
    {
      key: "creditId",
      label: "Credit A/C",
      type: "select",
      options: accounts?.map((item) => {
        return {
          label: item?.name,
          value: item?.id,
        };
      }),
      className: "min-w-[100px] max-w-[150px] w-full sm:w-auto",
      popupClassName: "w-[200px]",
    },
  ];

  useEffect(() => {
    dispatch(loadAllAccount());
  }, [dispatch]);
  useEffect(() => {
    dispatch(loadAllTransaction(pageConfig));
    return () => {
      dispatch(clearTransactionList());
    };
  }, [dispatch, pageConfig]);

  const onCalendarChange = (dates) => {
    const startDate = dates[0].format("YYYY-MM-DD");
    const endDate = dates[1].format("YYYY-MM-DD");

    setPageConfig((prev) => {
      return {
        ...prev,
        startDate,
        endDate,
      };
    });
  };

  return (
    <Card
      className='max-md:border-0 max-md:bg-white'
      bodyClass='max-md:p-0'
      headClass='border-none'
      title={"Transactions"}
      extra={
        <div className='flex flex-col sm:flex-row gap-2 sm:gap-3 md:justify-end justify-between items-stretch sm:items-center w-full sm:w-auto'>
          <RangePicker
            className='range-picker w-full sm:w-auto min-w-[200px]'
            onCalendarChange={onCalendarChange}
            defaultValue={[
              dayjs(pageConfig.startDate, "YYYY-MM-DD"),
              dayjs(pageConfig.endDate, "YYYY-MM-DD"),
            ]}
          />
          <CreateDrawer
            width={35}
            permission={"create-transaction"}
            title={"Create Transaction"}
            className="w-full sm:w-auto"
          >
            <AddTransaction />
          </CreateDrawer>
        </div>
      }
    >
      <UserPrivateComponent permission={"readAll-transaction"}>
        <TableComponent
          list={list}
          total={total?._count?.id}
          columns={columns}
          loading={loading}
          setPageConfig={setPageConfig}
          title={"Transaction List"}
          filters={filters}
          isSearch
        />
      </UserPrivateComponent>
    </Card>
  );
};

export default GetAllTransaction;
