import {
  Divider,
  FormControl,
  Grid,
  TextField,
  Typography,
} from "@mui/material";
import React, { useState } from "react";
import { SimpleSelect } from "../../common/simpleSelect";
import { CustomDatePicker } from "@/components/common/datePicker";
import RefreshOutlinedIcon from "@mui/icons-material/RefreshOutlined";
import {
  priceTypeOptions,
  productTypeOptions,
  availabilityOptions,
} from "@/utils/AddProductPageSelectDropdownsData";
import {
  comparisonOptions,
  productStatusOptions,
} from "@/utils/dropdownOptions";
import { TextFieldAndDropdown } from "@/components/common/textFieldAndDropdown";
import {
  BtnFilled,
  BtnOutlined,
} from "@/components/common/buttons/ButtonsVariations";
import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
import Box from "@mui/material/Box";
import Autocomplete from "@mui/material/Autocomplete";
import { SearchContainer } from "../styles";
import Container from "@mui/material/Container";
import { useFormik } from "formik";
import { ThreeDots } from "react-loader-spinner";
import moment from "moment";

export const AdvancedSearch = ({
  parentCategories,
  handleClose,
  getProductsList,
  setSearchValue,
  setFilteredDataNotFound,
}: any) => {
  const [loader, setLoader] = useState<boolean>(false);
  

  const handleChange = (event: any) => {
    const { name, value } = event.target;
    formik.setFieldValue(name, value);
  };
  let searchedValue = sessionStorage?.filterProduct
    ? JSON.parse(sessionStorage?.filterProduct)
    : {};
    

  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      availability: searchedValue?.availability ?? "",
      productCategory: searchedValue?.productCategory ?? {
        view: "",
        value: "",
      },
      productStatus: searchedValue?.productStatus ?? "",
      created_at: searchedValue?.created_at ?? "",
      updated_at: searchedValue?.updated_at ?? "",
      country: searchedValue?.country ?? "",
      priceType: searchedValue?.priceType ?? "",
      productType: searchedValue?.productType ?? "",
      rfq: searchedValue?.rfq ?? "",
      total_message: searchedValue?.total_message ?? "",
      // numMessages: searchedValue?.numMessages ?? "",
      messagesOperator: searchedValue?.messagesOperator ?? "",
      numViews: searchedValue?.numViews ?? "",
      viewsOperator: searchedValue?.viewsOperator ?? "",
      rfqOperator: searchedValue?.rfqOperator ?? "",
    },
    onSubmit: async (value) => {
      setLoader(true);
      handleClose();
      const uploadPayload = [
        {
          key: "availability",
          value: value?.availability,
        },
        {
          key: "category_id",
          value: value?.productCategory?.value?.toString(),
        },
        { key: "published", value: value?.productStatus },
        { key: "created_at", value: value?.created_at },
        { key: "updated_at", value: value?.updated_at },
        { key: "country_id", value: value?.country },
        { key: "price_type", value: value?.priceType },
        { key: "product_type", value: value?.productType },
        { key: "no_of_views", value: value?.numViews },
        { key: "no_views", value: value?.viewsOperator },
        // { key: "web_review_count", value: value?.viewsOperator },
        { key: "no_of_messsage", value: value?.total_message },
        { key: "no_message", value: value?.messagesOperator },
        { key: "total_message", value: value?.total_message },
        { key: "rfq", value: value?.rfq },
        { key: "no_of_operators", value: value?.rfqOperator },
      ];
      sessionStorage.setItem("filterProduct", JSON.stringify(value));
      setSearchValue(value);
      const response = await getProductsList(["all", uploadPayload]);
      if(response?.data.length == 0 ){
        setFilteredDataNotFound(true);
      }
      setLoader(false);
    },
  });

  // const onResetHandler = () => {
  //   formik.setFieldValue("availability", "");
  //   formik.setFieldValue("productCategory", {
  //     view: "",
  //     value: "",
  //   });
  //   formik.setFieldValue("productStatus", "");
  //   formik.setFieldValue("created_at", "");
  //   formik.setFieldValue("updated_at", "");
  //   formik.setFieldValue("country", "");
  //   formik.setFieldValue("priceType", "");
  //   formik.setFieldValue("productType", "");
  //   formik.setFieldValue("rfq", "");
  //   formik.setFieldValue("numMessages", "");
  //   formik.setFieldValue("total_message", "");
  //   formik.setFieldValue("messagesOperator", "");
  //   formik.setFieldValue("numViews", "");
  //   formik.setFieldValue("viewsOperator", "");
  //   formik.setFieldValue("rfqOperator", "");
  //   formik.resetForm();
  //   sessionStorage.removeItem("filterProduct");
  // };
  const onResetHandler = () => {
    formik.resetForm(); // Resets all fields to their initial values
    sessionStorage.removeItem("filterProduct"); // Clears the filterProduct from session storage
  };
  return (
    <>
      <form onSubmit={formik.handleSubmit}>
        <Container className="FilterContainer">
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              padding: "4px",
              paddingTop: "16px",
              alignItems: "center",
            }}
          >
            <Typography
              component="span"
              style={{
                fontSize: "18px",
                fontWeight: 600,
                fontFamily: "open sans",
              }}
            >
              Filters
            </Typography>
            <ClearOutlinedIcon
              style={{
                color: "#D7282FD9",
                cursor: "pointer",
                fontSize: "18px",
              }}
              onClick={() => {
                handleClose();
              }}
            />
          </div>
          <Divider style={{ marginBottom: "16px" }} />
          <SearchContainer>
            <Grid container spacing={2}>
              <Grid item xl={6} lg={6} md={6} sm={6} xs={12}>
                <SimpleSelect
                  value={formik?.values?.availability}
                  name={"availability"}
                  placeholder={"Product Availability"}
                  options={availabilityOptions}
                  handleChange={handleChange}
                  error={false}
                  overlay={true}
                />
              </Grid>
              <Grid item xl={6} lg={6} md={6} sm={6} xs={12}>
                <Autocomplete
                  size="small"
                  disableClearable={true}
                  id="category-list-autocomplete"
                  options={parentCategories}
                  getOptionLabel={(option) => option?.view}
                  onChange={(event: any, newValue: any) => {
                    event.stopPropagation();
                    formik.setFieldValue("productCategory", newValue);
                  }}
                  value={formik.values.productCategory}
                  defaultValue={formik.values.productCategory}
                  slotProps={{
                    popper: {
                      sx: {
                        zIndex: 98
                      }
                    }
                  }}
                  renderOption={(props, option) => (
                    <Box
                      component="li"
                      sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
                      {...props}
                    >
                      {option.view}
                    </Box>
                  )}
                  renderInput={(params) => {
                    return <TextField label={`Product Category`} {...params} />;
                  }}
                />
              </Grid>


              <Grid item xl={6} lg={6} md={6} sm={6} xs={12}>
                <SimpleSelect
                  error={false}
                  value={formik?.values?.productStatus}
                  name={"productStatus"}
                  handleChange={handleChange}
                  options={productStatusOptions}
                  placeholder="Product Status"
                />
              </Grid>

              <Grid item xl={6} lg={6} md={6} sm={6} xs={12}>
                <FormControl fullWidth>
                  <CustomDatePicker
                    error={false}
                    name="created_at"
                    label="Created on"
                    value={formik?.values?.created_at || "0000-00-00"}
                    handleChange={handleChange}
                    max_date={moment(new Date())}
                  />
                </FormControl>
              </Grid>
              <Grid item xl={6} lg={6} md={6} sm={6} xs={12}>
                <FormControl fullWidth>
                  <CustomDatePicker
                    error={false}
                    name="updated_at"
                    label="Last Updated"
                    value={formik?.values?.updated_at || "0000-00-00"}
                    handleChange={handleChange}
                    max_date={moment(new Date())}
                  />
                </FormControl>
              </Grid>
              <Grid item xl={6} lg={6} md={6} sm={6} xs={12}>
                <SimpleSelect
                  error={false}
                  value={formik?.values?.priceType}
                  handleChange={handleChange}
                  options={priceTypeOptions}
                  placeholder="Price Type"
                  name="priceType"
                />
              </Grid>
              <Grid item xl={6} lg={6} md={6} sm={6} xs={12}>
                <SimpleSelect
                  error={false}
                  value={formik?.values?.productType}
                  options={productTypeOptions}
                  name="productType"
                  placeholder="Product Type"
                  handleChange={handleChange}
                />
              </Grid>
              <Grid item xl={6} lg={6} md={6} sm={6} xs={12}>
                <TextFieldAndDropdown
                  dropdownOptions={comparisonOptions}
                  textFieldName={"rfq"}
                  dropdownName={"rfqOperator"}
                  textFieldLabel={"RFQ"}
                  dropdownLabel={"Range"}
                  handleChange={handleChange}
                  dropdownValue={formik?.values?.rfqOperator}
                  textFieldValue={formik?.values?.rfq}
                />
              </Grid>
              <Grid item xl={6} lg={6} md={6} sm={6} xs={12}>
                <TextFieldAndDropdown
                  dropdownOptions={comparisonOptions}
                  textFieldName={"numViews"}
                  dropdownName={"viewsOperator"}
                  textFieldLabel={"No. of Views"}
                  dropdownLabel={"Range"}
                  handleChange={handleChange}
                  dropdownValue={formik?.values?.viewsOperator}
                  textFieldValue={formik?.values?.numViews}
                />
              </Grid>
              <Grid item xl={6} lg={6} md={6} sm={6} xs={12}>
                <TextFieldAndDropdown
                  handleChange={handleChange}
                  textFieldName={"total_message"}
                  dropdownName={"messagesOperator"}
                  dropdownOptions={comparisonOptions}
                  textFieldLabel={"No. of Messages"}
                  dropdownLabel={"Range"}
                  dropdownValue={formik?.values?.messagesOperator}
                  textFieldValue={formik?.values?.total_message}
                />
              </Grid>
            </Grid>
          </SearchContainer>
          <Grid container spacing={2}>
            <Grid item xl={12} lg={12} md={12} sm={12} xs={12}>
              <Divider />
              <div
                style={{
                  display: "flex",
                  gap: "10px",
                  justifyContent: "flex-end",
                  marginTop: "10px",
                  marginBottom: "10px",
                }}
              >
                <BtnFilled type="submit" disabled={loader}>
                  {loader ? (
                    <ThreeDots
                      height="40"
                      width="40"
                      radius="9"
                      color="white"
                      ariaLabel="three-dots-loading"
                      wrapperStyle={{}}
                      visible={true}
                    />
                  ) : (
                    "Search"
                  )}
                </BtnFilled>
                <BtnOutlined
                  onClick={() => {
                    onResetHandler();
                  }}
                >
                  <RefreshOutlinedIcon />
                  Reset
                </BtnOutlined>
              </div>
            </Grid>
          </Grid>
        </Container>
      </form>
    </>
  );
};