/* eslint-disable @typescript-eslint/no-empty-function */
/* eslint-disable @typescript-eslint/no-unused-vars */
import {
  Button,
  DatePicker,
  Input,
  notification,
  Popconfirm,
  Radio,
  Select,
  Skeleton,
  Space,
  Spin,
  Table,
} from "antd";
import { FC, useContext, useEffect, useState } from "react";
import styles from "./indisparePrice.module.scss";
import cx from "classnames";
import {
  SearchOutlined,
  SwapOutlined,
  LoadingOutlined,
} from "@ant-design/icons";
import * as CommonAPI from "../../../pages/api/common";
import * as CheckAPI from "../../../pages/api/ship";
import * as CartApi from "../../../pages/api/cart";
import type { ColumnsType, TablePaginationConfig, TableProps } from "antd/es/table";
import * as Invoice from "../../../pages/api/invoice";
import axios from "axios";
import { APIKEY, baseUrl } from "../../../constants/urls";
import * as AddressApi from "../../../pages/api/address";
import { useRouter } from "next/router";
import shopConetxt from "../../../context/shopConetxt";
import _ from "lodash";
import * as XLSX from "xlsx";
import Geocode from "react-geocode";
import type { DatePickerProps } from "antd";
import moment from "moment";
import { FilterValue } from "antd/lib/table/interface";
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
interface DataType {
  key: React.Key;
  sno: any;
  lastCategory: any;
  itemName: any;
  specifications: any;
  indisparePrice: any;
  quantity: any;
  ValidityofPrice: any;
  Frequency: any;
  comments: any;
  totalPrice: any;
  mrp: any;
  discount: any;
}

interface TableParams {
    pagination?: TablePaginationConfig;
    sortField?: string;
    sortOrder?: string;
    filters?: Record<string, FilterValue>;
  }

const IndisparePriceComponent: FC<any> = () => {
  const {
    cart,
    setCartItems,
    setIsCartLoading,
    productQuantity,
    setProductQuantity,
    deliveryOptions,
    deliveryPriceDetails,
    setDeliveryPriceDetails,
    deliveryDunzoPriceDetails,
    setDeliveryDunzoPriceDetails,
  } = useContext<any>(shopConetxt);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [indispareData, setIndispareData] = useState([]);
  const [selectedData, setselectedData] = useState([]);
  const [indispareDataNew, setIndispareDataNew] = useState([]);
  const [loginRes, setLoginRes] = useState<any>({});
  const [address, setAddress] = useState("");
  const [billingAddress, setBillingAddress] = useState("");
  const [addressData, setAddressData] = useState([]);
  const [selectedProducts, setSelectProducts] = useState<any>([]);
  const [selectDeliverType, setSelectDeliverType] = useState("2");
  const [DisableSlect, setDisableSlect] = useState(false);
  const [isLoader, setIsLoader] = useState(false);
  const [currentAddress, setCurrentAddress] = useState<any>({});
  const [latitude, setLatitude] = useState(null);
  const [value, setValue] = useState("");
  const [longitude, setLongitude] = useState(null);
  const [loadingSpin, setLoadingSpin] = useState(false);
  const [sorter, setSorter] = useState<any>({});
  const [productInvoice, setProductInvoice] = useState<any>({});
  const [date, setDate] = useState("");
  const [total, setTotal] = useState(0);
  const router = useRouter();
  const [tableParams, setTableParams] = useState<TableParams>({
    pagination: {
      current: 1,
      pageSize: 20,
    },
  });

  const columns: ColumnsType<DataType> = [
    {
      title: "S.No",
      dataIndex: "id",
      key: "id",
      width: 60,
      render: (text, object: any, index) => {

         const currentPage = tableParams.pagination?.current || 1;

      const pageSize = tableParams.pagination?.pageSize || 20;
      return (currentPage - 1) * pageSize + index + 1;
      },
      responsive: ["xs", "xl", "md"],
    },

    {
      title: "Item Name",
      dataIndex: "name",
      key: "name",
      render: (text, object: any, index) => {
        return object?.name;
      },
      responsive: ["xs", "xl", "md"],
    },
    {
      title: "Specifications",
      dataIndex: "specifications",
      key: "specifications",
      render: (text, object: any, index) => {
        return object?.specifications;
      },
      responsive: ["xs", "xl", "md"],
    },

    {
      title: "Listing Price",
      dataIndex: "mrp",
      key: "mrp",
      sorter: (a: any, b: any) => a?.mrp.localeCompare(b?.mrp),
      render: (text, object: any, index) => {
        return object?.mrp.toString().includes("₹")
          ? object?.mrp
          : "₹" + object?.mrp;
      },
      responsive: ["xs", "xl", "md"],
    },
    {
      title: "Discount",
      dataIndex: "customer_discount_percent",
      key: "customer_discount_percent",
      sorter: (a: any, b: any) =>
        a?.customer_discount_percent.localeCompare(
          b?.customer_discount_percent
        ),
      render: (text, object: any, index) => {
        return object?.customer_discount_percent + "%";
      },
      responsive: ["xs", "xl", "md"],
    },
    {
      title: "Indispare Price",
      dataIndex: "customer_price",
      key: "customer_price",
      sorter: (a: any, b: any) =>
        a?.customer_price.localeCompare(b?.customer_price),
      render: (text, object: any, index) => {
        return object?.customer_price.toString().includes("₹")
          ? object?.customer_price
          : "₹" + object?.customer_price;
      },
      responsive: ["xs", "xl", "md"],
    },
    {
      title: "Quantity",
      dataIndex: "quantity",
      key: "quantity",

      render: (text, object: any, index) => {
        return (
          <input
            name="quantity"
            placeholder="Enter Qty"
            type="number"
            value={object?.quantity}
            onChange={(e) => handleInputChange(e, index)}
            className={cx(styles.textInput, "numberInput")}
          />
        );
      },
      responsive: ["xs", "xl", "md"],
    },
    {
      title: "UOM",
      dataIndex: "uom",
      key: "uom",
      sorter: (a: any, b: any) => a?.uom.localeCompare(b?.uom),
      render: (text, object: any, index) => {
        return object?.uom;
      },
      responsive: ["xs", "xl", "md"],
    },

    {
      title: "Total Price",
      dataIndex: "total_price",
      key: "total_price",

      render: (text, object: any, index) => {
        return "₹" + parseFloat(object?.total_price).toFixed(2);
      },
      responsive: ["xs", "xl", "md"],
    },
    {
      title: "Comments",
      dataIndex: "comments",
      key: "comments",
      render: (text, object: any, index) => {
        return (
          <div style={{ width: "100px" }}>
            <input
              name="comments"
              placeholder="Enter comments"
              value={object?.comments}
              onChange={(e) => handleInputChange(e, index)}
              className={cx(styles.textComment)}
            />
          </div>
        );
      },
      responsive: ["xs", "xl", "md"],
    },
    // {
    //     title: "Action",
    //     key: "action",
    //     // responsive: ["xs"],
    //     render: (_, record: any) => (
    //         <Space size="middle" className={styles.buttonsSelection}>
    //             <SwapOutlined style={{ color: "#291c62", fontSize: "24px" }} />
    //         </Space>
    //     ),
    // },
  ];

  const setIndispareDataFromApi = (res: any) => {
    const dataLoop: any = [];

    for (let i = 0; i < res?.data?.data?.length; i++) {
      dataLoop.push({
        key: i,
        product_id: res?.data?.data[i].product_id,
        sku: res?.data?.data[i].sku,
        name: res?.data?.data[i].product?.name,
        category_name: res?.data?.data[i].category_name,
        mrp: res?.data?.data[i].mrp,
        customer_discount_percent: res?.data?.data[i].customer_discount_percent,
        specifications: res?.data?.data[i].specifications,
        quantity: res?.data?.data[i].quantity,
        customer_price: res?.data?.data[i].customer_price,
        frequency: res?.data?.data[i].frequency,
        total_price: res?.data?.data[i].total_price,
        seller_name: res?.data?.data[i].seller?.title,
        seller_lat: res?.data?.data[i].seller?.latitude,
        seller_long: res?.data?.data[i].seller?.longitude,
        id: res?.data?.data?.[i]?.id,
        seller_id: res?.data?.data[i].seller?.id,
        weight: res?.data?.data[i].product?.weight,
        seller_postcode: res?.data?.data[i].seller?.postcode,
        uom: res?.data?.data[i]?.uom,
      });
    }
    setIndispareData(dataLoop);
    setIndispareDataNew(dataLoop);
    setselectedData(dataLoop);
  };

//   useEffect(() => {
//     const val: any = localStorage.getItem("loginDetails");
//     const details: any = JSON.parse(val);
//     const sortOrder =
//       sorter?.order === "ascend"
//         ? "asc"
//         : sorter?.order === "descend"
//         ? "desc"
//         : "desc";
//     const sortColumn = sorter?.columnKey;
//     const optionalParam = sortColumn
//       ? `&sort=${sortOrder}&sort_column=${sortColumn}`
//       : `&sort=${sortOrder}`;
//     CommonAPI.getRequestWithToken(
//       `${baseUrl}/api/customer/fix-prices-for-customer?token=true${optionalParam}`,
//       details?.token
//     ).then((res) => {
//       setIndispareDataFromApi(res);
//       setIsLoader(false);
//     });
//   }, [sorter]);

  const list = async (token: any, search: any,page:any,limit:any) => {
    const sortOrder =
      sorter?.order === "ascend"
        ? "asc"
        : sorter?.order === "descend"
        ? "desc"
        : "desc";
    const sortColumn = sorter?.columnKey;
    const optionalParam = sortColumn
      ? `&sort=${sortOrder}&sort_column=${sortColumn}`
      : `&sort=${sortOrder}`;
    const _filert = {
      page: page,
      limit: limit,
      search: search,
      sort: sortOrder,
      sort_column: sortColumn
    };
    // CommonAPI.getRequestWithToken(
    //     `${baseUrl}/api/customer/fix-prices-for-customer?token=true${optionalParam}`,
    //    token
    //   ).then((res) => {
    await axios
      .get(`${baseUrl}/api/customer/fix-prices-for-customer?token=true`, {
        params: { ..._filert },
        headers: {
          Accept: "application/json",
          Authorization: `Bearer ` + token,
        },
      })
      .then((res:any) => {
        console.log(res,"res")
        setIsLoader(false);
        const prod: any = [];
      
        setIndispareDataFromApi(res);
        // setNewProduct(res?.data?.list);
        // setRemoveProduct(res?.data?.list);
        setTotal(res?.data?.count)
       
        
      });
  };


  useEffect(() => {
    setIsLoader(true);
    const val: any = localStorage.getItem("loginDetails");
    const details: any = JSON.parse(val);

    list(details?.token, value,tableParams?.pagination?.current,tableParams?.pagination?.pageSize);
    const pin = localStorage.getItem("PinCode");
    setLoginRes(details);
    // CommonAPI.getRequestWithToken(`${baseUrl}/api/customer/fix-prices-for-customer?token=true&sort=desc`, details?.token).then((res) => {
    //     setIndispareDataFromApi(res);
    //     setIsLoader(false);
    // })
    const address: any = [];
    AddressApi.getAdresses(details?.token).then((res) => {
      for (let i = 0; i < res?.data?.length; i++) {
        const addrs = {
          value: res?.data[i].id,
          label: res?.data[i]?.address1?.toString(),
        };
        address.push(addrs);
      }
      setAddressData(address);
    });
    CommonAPI.getRequestWithToken(
      `${baseUrl}/api/customer-pincodes/get-data?token=true&customer_id=${details?.data?.id}`,
      details?.token
    ).then((Selectres) => {
      setCurrentAddress(Selectres?.data?.data);
    });

    if (pin !== null) {
      Geocode.setApiKey(APIKEY);
      Geocode.enableDebug();
      Geocode.fromAddress(pin).then(({ results }) => {
        const { lat, lng } = results[0].geometry.location;
        setLatitude(lat);
        setLongitude(lng);
      });
    }
  }, []);

  const onChangeTable: TableProps<DataType>["onChange"] = (
    pagination: TablePaginationConfig,
    filters,
    sorter,
    extra
  ) => {
    list(loginRes?.token,value,pagination?.current,pagination?.pageSize);
    setTableParams({
      pagination,
      ...sorter,
    });

    // `dataSource` is useless since `pageSize` changed
    if (pagination.pageSize !== tableParams.pagination?.pageSize) {
      //setIndispareDataFromApi([]);
    }
    setSorter(sorter);
  };

  const rowSelection = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
      setSelectProducts(selectedRows);
      selectedRows.map((item: any) => {
        if (item?.seller_id == selectedRows[0].seller_id) {
          setDisableSlect(false);
        } else {
          setDisableSlect(true);
        }
      });
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === "Disabled User", // Column configuration not to be checked
      name: record.name,
    }),
  };

  function handleInputChange(event: any, index: number) {
    // return;

    const { name, value } = event.target;
    const list: any = [...selectedData];
    list[index][name] = value;
    setselectedData(list);
  }

  const submitIndisparePrice = () => {
    setLoadingSpin(true);
    if (selectedProducts.length == 0) {
      notification.warn({ message: "Please Select Products" });
      setLoadingSpin(false);
    } else if (selectDeliverType == "") {
      notification.warn({ message: "Please Select Products" });
    } else if (address == "") {
      notification.warn({ message: "Please Select Delivery Addresss" });
      setLoadingSpin(false);
    } else if (billingAddress == "") {
      notification.warn({ message: "Please Select Billing Addresss" });
      setLoadingSpin(false);
    } else {
      const items: any = [];
      selectedProducts.map((item: any) => {
        const data = {
          id: item?.id,
          quantity: item?.quantity,
        };
        items.push(data);
      });

      const params = {
        billing_address_id: address,
        shipping_address_id: address,
        items: items,
        shipping_type: selectDeliverType,
      };
      //  console.log(params,"params");

      CommonAPI.postRequestWithToken(
        `${baseUrl}/api/customer/buy-from-fixed-price?token=true`,
        params,
        loginRes?.token
      ).then((res) => {
        // console.log(res,"res")
        setLoadingSpin(false);
        notification.success({ message: res?.data?.message });
        router.replace({
          pathname: `/customerDashboard/customerDashboard`,
          query: { val: "My Orders" },
        });
      });
    }
  };

  const addTocart = () => {
    const pin = localStorage.getItem("PinCode");
    setLoadingSpin(true);
    if (selectedProducts.length == 0) {
      notification.warn({ message: "Please Select Products" });
      setLoadingSpin(false);
    } else {
      const items: any = [];
      selectedProducts.map((item: any) => {
        const data = {
          id: item?.id,
          quantity: item?.quantity,
        };
        items.push(data);
      });

      const params = {
        items: items,
        customer_lat:
          currentAddress?.latitude == null
            ? latitude
            : currentAddress?.latitude,
        customer_lang:
          currentAddress?.latitude == null
            ? longitude
            : currentAddress?.latitude,
        customer_pincode: pin,
      };
      CommonAPI.postRequestWithToken(
        `${baseUrl}/api/customer/add-to-cart-from-fixed-price?token=true`,
        params,
        loginRes?.token
      ).then((res) => {
        // console.log(res,"res")
        setLoadingSpin(false);
        if (res?.data?.warnings?.length == 0) {
          const tokenData: any = !_.isEmpty(loginRes) ? loginRes.token : null;
          CartApi.cartFetch(tokenData).then((cartRes: any) => {
            if (cartRes.data !== null) {
              notification.success({ message: res?.data?.message });
              setProductInvoice(cartRes.data);
              setCartItems(cartRes.data);
              router.push("/cart");
            }
          });
        } else {
          notification.error({ message: res?.data?.warnings?.[0] });
        }
      });
    }
  };

  const onChange = (event: any) => {
    const cityPincode = localStorage.getItem("PinCode");
    setSelectDeliverType(event.target.value);
    const lat = loginRes?.data ? currentAddress?.latitude : latitude;
    const long = loginRes?.data ? currentAddress?.longitude : longitude;
    const weight = selectedProducts?.reduce(
      (weight: any, obj: any) => parseFloat(obj.weight) + parseFloat(weight),
      0
    );
    if (event.target.value == 1) {
      CommonAPI.getRequest(
        `${baseUrl}/api/dunzo/availability?pickup_lat=${selectedProducts?.[0]?.seller_lat}&pickup_lng=${selectedProducts?.[0]?.seller_long}&drop_lat=${lat}&drop_lng=${long}`
      ).then((available) => {
        setDeliveryDunzoPriceDetails(available?.data);
        setDeliveryPriceDetails({});
      });
    } else if (event.target.value == 2) {
      setDeliveryPriceDetails({});
      setDeliveryDunzoPriceDetails({});
    } else {
      CheckAPI.shippingAvailableCheckingAPI(
        loginRes?.token,
        selectedProducts?.[0]?.seller_postcode,
        cityPincode,
        weight
      ).then((res) => {
        setDeliveryPriceDetails(res);
        setDeliveryDunzoPriceDetails({});
        localStorage.setItem("DeliveryDetails", JSON.stringify(res));
      });
    }
  };

  const downloadIndispareFixPriceList = (order: any) => {
    axios
      .get(`${baseUrl}/api/customer/download-fix-price-list?token=true`, {
        responseType: "blob",
        headers: {
          Authorization: `Bearer ` + loginRes?.token,
        },
      })
      .then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");

        link.href = url;
        link.setAttribute("download", "fix_price_list.pdf");
        document.body.appendChild(link);
        link.click();
      })
      .catch((error) => {});
  };

  const Search = (search: any) => {

    list(loginRes?.token, search,tableParams?.pagination?.current,tableParams?.pagination?.pageSize);
    return;
    CommonAPI.getRequestWithToken(
      `${baseUrl}/api/customer/fix-prices-for-customer?token=true&search=${search}&sort=desc`,
      loginRes?.token
    ).then((res) => {
      setIndispareDataFromApi(res);
    });
  };

  const exportExcel = () => {
    const Heading = [
      [
        "S.no",
        "Category Name",
        "Product Name",
        "UOM",
        "Quantity",
        "MRP",
        "Customer Discount %",
        "Customer Price",
        "Specifications",
        "Created At",
      ],
    ];
    const wb = XLSX.utils.book_new();
    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([]);
    XLSX.utils.sheet_add_aoa(ws, Heading);

    //let buffer = XLSX.write(workbook, { bookType: "xlsx", type: "buffer" });
    //XLSX.write(workbook, { bookType: "xlsx", type: "binary" });
    const final_result = [];
    const data: any =
      selectedProducts.length > 0 ? selectedProducts : indispareData;
    for (let index = 0; index < data.length; index++) {
      const element: any = data[index];

      const result = [
        index + 1,
        element?.category_name,
        element?.product?.name,
        element?.uom,
        element?.quantity,
        element.mrp,
        element.customer_discount_percent,
        element.customer_price,
        element.specifications,
        element.created_at,
      ];
      final_result.push(result);
    }

    XLSX.utils.sheet_add_json(ws, final_result, {
      origin: "A2",
      skipHeader: true,
    });

    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
    const name_date = new Date().toString().slice(4, 15).replace(/ /g, "_");
    XLSX.writeFile(wb, `IndisparePrice_${name_date}.xlsx`);
  };

  const onChangeCalendar: DatePickerProps["onChange"] = async (
    date,
    dateString
  ) => {
    console.log(date, moment(dateString).format("YYYY-MM-DD"));
    setDate(dateString);
  };

  return (
    <>
      <div className={cx("px-4", styles.container)}>
        <h1 className={styles.h1}>Indispare Rate</h1>

        <div className="ant-row pb-6">
          <div className={cx("ant-col ant-col-sm-24 ant-col-xl-19")}>
            <div className={cx("ant-row mb-4")}>
              <div className={cx("ant-col ant-col-sm-24 ant-col-xl-8")}>
                <Input
                  value={value}
                  placeholder="Search"
                  style={{ width: 200 }}
                  allowClear={true}
                  suffix={<SearchOutlined />}
                  size={"middle"}
                  onChange={(e: any) => {
                    setValue(e.target.value);
                    Search(e.target.value);
                  }}
                  // onChange={(e: any) => {
                  //     if (e.target.value === "") {
                  //         setIndispareData(indispareDataNew);
                  //         setValue("");
                  //     } else if (e?.nativeEvent?.inputType == "deleteContentBackward") {
                  //         const currValue = e.target.value.toLowerCase();
                  //         setValue(currValue);
                  //         const removeFilter = indispareDataNew;
                  //         const filteredData = removeFilter.filter((entry: any) => {
                  //             const name = entry?.name.toLowerCase() || entry?.category_name.toLowerCase()
                  //             return name.includes(currValue);
                  //         });
                  //         setIndispareData(filteredData);
                  //     } else {
                  //         const currValue = e.target.value.toLowerCase();
                  //         setValue(currValue);
                  //         const filteredData = indispareData.filter((entry: any) => {
                  //             const name = entry?.name.toLowerCase() || entry?.category_name.toLowerCase();
                  //             const final_name = name.toLowerCase();
                  //             return final_name.includes(currValue);
                  //         });
                  //         setIndispareData(filteredData);
                  //     }
                  // }}
                />
              </div>
            </div>
          </div>
          {/* <div className="ant-col ant-col-xl-6 ant-col-md-12 ant-col-xs-24">
                        <div className={styles.labelAddress}>Select Delivery Address</div>
                        <Select
                            className={styles.statusVale}
                            placeholder={"Please Select Address"}
                            options={addressData}
                            value={address}
                            onChange={(e) => { setAddress(e) }}

                        />
                        <div className={cx(styles.labelAddress, "pt-4")}>Select Billing Address</div>
                        <Select
                            className={styles.statusVale}
                            placeholder={"Please Select Address"}
                            options={addressData}
                            value={billingAddress}
                            onChange={(e) => { setBillingAddress(e) }}

                        />

                    </div> */}
          {/* <div className="ant-col ant-col-xl-12 ant-col-md-12 ant-col-xs-24 pl-4">
                        {indispareData.length>0?<><div className={styles.labelAddress}>Select Delivery Type</div>
                        <Radio.Group onChange={onChange} value={selectDeliverType}>
                            <Space >
                                <Radio key={0} value={"0"} disabled={DisableSlect}><div>Regular Delivery (Takes 3-4 days)</div>
                                    <div>{_.isEmpty(deliveryPriceDetails)?"":deliveryPriceDetails?.status
                                        ?
                                        "Expected delivery in  " +
                                        deliveryPriceDetails?.estimated_delivery_days +
                                        " - ₹" +
                                        deliveryPriceDetails?.rate
                                        : "Delivery Not Available" }</div></Radio>
                                <Radio key={1} value={"1"} disabled={DisableSlect}>Lightening Delivery (Takes approx. 4hrs, only for same cities)<div>{_.isEmpty(deliveryDunzoPriceDetails)?"":deliveryDunzoPriceDetails?.status
                            ? "Expected delivery in 4 hours" +
                            // deliveryDunzoPriceDetails?.estimated_delivery_mins +
                            " - ₹" +
                            deliveryDunzoPriceDetails?.rate
                            : "Delivery Not Available"}</div></Radio>
                                <Radio key={2} value={"2"}>Indispare Delivery (For orders more than 20kgs)</Radio>
                            </Space>
                        </Radio.Group>

                        </>:<></>}
                    </div> */}
          {/* {indispareData.length>0 && <div className="ant-col ant-col-xl-3 ant-col-md-6 ant-col-xs-12" style={{padding: "20px 0"}}>
                        <span>Payment Mode: Pay Later</span>
                    </div>} */}
          <div
            className="ant-col ant-col-xl-3 ant-col-md-6 ant-col-xs-12"
            style={{ padding: "10px 0" }}
          >
            <div className="flex justify-end" style={{ flexDirection: "row" }}>
              <Popconfirm
                title={"Previous items in the cart will be deleted"}
                onConfirm={addTocart}
                okText="Yes"
                cancelText="Cancel"
              >
                {selectedProducts.length == 0 ? null : (
                  <Button type="primary">{"Add to Cart"}</Button>
                )}
              </Popconfirm>
              {/* <Button type="primary" onClick={addTocart}>Add to Cart</Button> */}
              <Button
                type="primary"
                onClick={exportExcel}
                style={{ margin: "0 10px" }}
              >
                Export List
              </Button>
            </div>
          </div>
        </div>

        {isLoader ? (
          <Skeleton />
        ) : (
          <Table
            rowSelection={rowSelection}
            columns={columns}
            onChange={onChangeTable}
            
            pagination={{
              ...tableParams.pagination,
              total: total,
            }}
            dataSource={indispareData}
            scroll={{ x: 1600, y: 900 }}
          />
        )}
      </div>
      <Spin
        indicator={antIcon}
        spinning={loadingSpin}
        className={styles.loaderContainer}
      />
    </>
  );
};

export default IndisparePriceComponent;