import Card from "@/UI/Card";
import Table from "@/UI/Table";
import { SolutionOutlined } from "@ant-design/icons";
import moment from "moment";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useParams } from "react-router";
import { Link } from "react-router-dom";
import { clearPurchaseReturn, loadSinglePurchaseReturnInvoice } from "../../redux/rtk/features/PurchaseReturnList/PurchaseReturnListSlice";
import NewPurchaseReturnInvoice from "../Invoice/NewPurchaseReturnInvoice";
import ColVisibilityDropdown from "../Shared/ColVisibilityDropdown";

export default function SinglePurchaseInvoice() {
  const dispatch = useDispatch();
  const { id } = useParams("id");
  const [columnsToShow, setColumnsToShow] = useState([]);
  const { returnPurchase, loading } = useSelector(
    (state) => state.purchaseReturn
  );
  const columns = [
    {
      id: 1,
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      id: 2,
      title: "Product Name",
      key: "product",
      dataIndex: "product",
      render: (product) => (
        <Link to={`/admin/product/${product?.id}`}>{product?.name}</Link>
      ),
    },
    {
      id: 3,
      title: "Date",
      dataIndex: "createdAt",
      key: "date",
      render: (createdAt) => moment(createdAt).format("ll"),
    },

    {
      id: 4,
      title: "Product Quantity",
      dataIndex: "productQuantity",
      key: "productQuantity",
    },
    {
      id: 5,
      title: "Purcahse Price",
      dataIndex: "productUnitPurchasePrice",
      key: "productUnitPurchasePrice",
    },
    {
      id: 5,
      title: "Total Tax",
      dataIndex: "taxAmount",
      key: "taxAmount",
    },
  ];
  useEffect(() => {
    setColumnsToShow(columns);
    dispatch(loadSinglePurchaseReturnInvoice(id));
    // eslint-disable-next-line react-hooks/exhaustive-deps
    return () => {
      dispatch(clearPurchaseReturn());
    };
  }, []);

  const columnsToShowHandler = (val) => {
    setColumnsToShow(val);
  };

  const addKeys = (arr) => arr?.map((i) => ({ ...i, key: i.id }));

  return (
    <>
      <Card
        title={
          <h5 className='flex items-center flex-wrap gap-2'>
            <SolutionOutlined />
            <span className='break-all'>ID : {id}</span>
          </h5>
        }
        extra={
          <div className='flex gap-2 flex-wrap'>
            {returnPurchase && (
              <NewPurchaseReturnInvoice
                title={"Purchase return Invoice"}
                data={returnPurchase}
              />
            )}
          </div>
        }
      >
        <div className='text-base sm:text-lg md:text-xl mt-3 font-medium flex justify-center text-center px-2'>
          Purchase Return Product Information
        </div>

        {returnPurchase && (
          <div>
            <div className='flex flex-col lg:flex-row justify-between gap-3 mx-2 my-2'>
              <div className='w-full lg:w-auto'>
                <ColVisibilityDropdown
                  options={columns}
                  columns={columns}
                  columnsToShowHandler={columnsToShowHandler}
                />
              </div>

              <div className='flex flex-col sm:flex-row gap-2 w-full lg:w-auto'>
                <div className='bg-gray-100 px-2 py-1 rounded-sm text-sm sm:text-base break-words'>
                  <span className='font-semibold sm:font-normal'>Purchase Invoice Id:</span> {returnPurchase?.purchaseInvoiceId}
                </div>
                <div className='bg-gray-100 px-2 py-1 rounded-sm text-sm sm:text-base whitespace-nowrap'>
                  <span className='font-semibold sm:font-normal'>Date:</span> {moment(returnPurchase?.createdAt).format("DD/MM/YYYY")}
                </div>
              </div>
            </div>
          </div>
        )}
        <div className='mb-5 overflow-x-auto'>
          <Table
            scroll={{ x: true }}
            loading={!returnPurchase}
            columns={columnsToShow}
            data={
              returnPurchase
                ? addKeys(returnPurchase?.returnPurchaseInvoiceProduct)
                : []
            }
          />
        </div>
        <div className='font-bold mx-2 text-sm sm:text-base md:text-lg px-2 py-2 break-words'>
          Total Return Amount:{" "}
          {(returnPurchase?.totalAmount || 0) + (returnPurchase?.tax || 0)}
        </div>
        <h6 className='mx-2 my-0 w-full max-w-full lg:max-w-[500px] py-2 px-2'>
          <span className='font-bold text-sm sm:text-base'>Return Note:</span>
          <span className='font-medium text-sm sm:text-base break-words'> {returnPurchase?.note}</span>{" "}
        </h6>
      </Card>
    </>
  );
}
