import { Box, Button, Switch, Typography } from "@mui/material";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { useContext, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { provinceGetProducts } from "../features/province/services/province-get-producrs";
import { SimpleTable } from "../components/simple-table/SimpleTable";
import { OPEN_MODAL } from "../lib/redux/slices/appSlice";
import { ProvinceSubmitProductPrice } from "../features/province/components/province-submit-product-price/ProvinceSubmitProductPrice";
import { provinceSubmitProductPrice } from "../features/province/services/province-submit-product-price";
import { AppContext } from "../contexts/AppContext";

const ProvinceProducts = () => {
  const [openNotif] = useContext(AppContext);

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(provinceGetProducts());
  }, []);

  const handleRespose = (r) => {
    if (r.error) {
      openNotif({
        vertical: "top",
        horizontal: "center",
        msg: "مشکلی پیش آمده است!",
        severity: "error",
      });
    } else {
      openNotif({
        vertical: "top",
        horizontal: "center",
        msg: "عملیات با موفقیت انجام شد.",
        severity: "success",
      });
      dispatch(provinceGetProducts());
    }
  };

  const { provinceProductList } = useSelector((item) => item.provinceSlice);

  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    const d = provinceProductList?.map((item, i) => [
      i + 1,
      item?.name,
      <Switch
        key={i}
        checked={item?.sellingApprovedPrice}
        onClick={() => {
          dispatch(
            provinceSubmitProductPrice({
              product_key: item?.key,
              selling_free_price: item?.sellingFreePrice,
              selling_approved_price:
                item?.sellingApprovedPrice === true ? false : true,
              selling_more_than_inventory: item?.sellingMoreThanInventory,
              selling_other_products: item?.sellingOtherProducts,
              price: item?.price,
            })
          ).then((r) => {
            handleRespose(r);
          });
        }}
      />,
      <Switch
        key={i}
        checked={item?.sellingFreePrice}
        onClick={() => {
          dispatch(
            provinceSubmitProductPrice({
              product_key: item?.key,
              selling_free_price:
                item?.sellingFreePrice === true ? false : true,
              selling_approved_price: item?.sellingApprovedPrice,
              selling_more_than_inventory: item?.sellingMoreThanInventory,
              selling_other_products: item?.sellingOtherProducts,
              price: item?.price,
            })
          ).then((r) => {
            handleRespose(r);
          });
        }}
      />,
      <Switch
        key={i}
        checked={item?.sellingMoreThanInventory}
        onClick={() => {
          dispatch(
            provinceSubmitProductPrice({
              product_key: item?.key,
              selling_free_price: item?.sellingFreePrice,
              selling_approved_price: item?.sellingApprovedPrice,
              selling_more_than_inventory:
                item?.sellingMoreThanInventory === true ? false : true,
              selling_other_products: item?.sellingOtherProducts,
              price: item?.price,
            })
          ).then((r) => {
            handleRespose(r);
          });
        }}
      />,
      <Switch
        key={i}
        checked={item?.sellingOtherProducts}
        onClick={() => {
          dispatch(
            provinceSubmitProductPrice({
              product_key: item?.key,
              selling_free_price: item?.sellingFreePrice,
              selling_approved_price: item?.sellingApprovedPrice,
              selling_more_than_inventory: item?.sellingMoreThanInventory,
              selling_other_products:
                item?.sellingOtherProducts === true ? false : true,
              price: item?.price,
            })
          ).then((r) => {
            handleRespose(r);
          });
        }}
      />,
      <a href={item?.image} alt="دانلود تصویر محصول" key="productPicture">
        <img
          src={item?.image}
          width="50"
          height="50"
          alt="بدون بار"
          className="images-file"
        />
      </a>,
      <Grid key={i} container justifyContent="center">
        <Typography mr={2}>{item?.price}</Typography>
        <Button
          disabled={!item?.sellingApprovedPrice}
          size="small"
          variant="contained"
          onClick={() => {
            dispatch(
              OPEN_MODAL({
                title: "ثبت قیمت",
                content: <ProvinceSubmitProductPrice item={item} />,
              })
            );
          }}
        >
          ثبت
        </Button>
      </Grid>,
    ]);

    setTableData(d);
  }, [provinceProductList]);

  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          xs={12}
          sm={12}
          md={10}
          lg={10}
        >
          <Grid
            container
            justifyContent="space-between"
            gap={SPACING.SMALL}
            mt={SPACING.SMALL}
          >
            <Grid width="100%">
              <Grid mt={SPACING.SMALL} mb={SPACING.SMALL}>
                <Typography variant="body1">محصولات</Typography>
              </Grid>
              <SimpleTable
                data={tableData}
                columns={[
                  "ردیف",
                  "نام محصول",
                  "قیمت به قیمت دولتی",
                  "فروش به قیمت آزاد",
                  "فروش بیشتر از انبار",
                  "فروش سایر محصولات",
                  "تصویر",
                  "قیمت",
                ]}
              />
            </Grid>
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default ProvinceProducts;
