import React, { useCallback, useEffect, useState } from "react";
// import useProductContext from "@/hooks/useProductContext";
import { StaticRightContent } from "./rightStaticContent";
import {
  OuterContainer,
  InnerLeftContainer,
  PreHeaderText,
  Heading,
  SubHeading,
  AccordionHeading,
  EditPostAccordion,
  ProductSectionHeaderContainer,
  CategoryContainerSmall,
  CategorySelector,
  RightContent,
  SelectCategory,
  SelectCategoryText,
  HideOnScrollContentt,
  StickyHeaderStyle,
  BreadcrumbArrow,
  CategoryBoxSmall,
  SearchForCommonCateory,
  SearchHere,
  CategorySelectorSearch,
} from "./styles";
import poststyle from "./style.module.css";
import { ProductCategories } from "./productCategories";
import { ProductDescription } from "./productDescription";
import { ProductInfo } from "./productInformation";
import { CommercialInformation } from "@/components/products/editProduct/commercialInformation";
import Editing from "@/components/products/editProduct/SmartEditing/Editing";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { ActivePassiveTab } from "./productInformation/activePassive";
import Typography from "@mui/material/Typography";
import {
  Autocomplete,
  Box,
  Breadcrumbs,
  InputAdornment,
  TextField,
} from "@mui/material";
import UploadProducts from "./rightStaticContent/UploadProducts";
import { BASE_URL } from "@/utils/staticValues";
import Auth from "@/auth/Auth";
import axios from "axios";
import { useRouter } from "next/router";
import Image from "next/image";
import { useSelector } from "react-redux";
import { setToggleNavbar } from "@/hooks/HeaderHooks";
import { useAppDispatch } from "redux/store";
import { LightTooltip } from "@/components/common/Tooltip/tooltip";
import EditPostSkelton from "./EditPostSkeleton";
import EditProductFormik from "@/hooks/useEditProductFormik";
import {
  getCurrencyList,
  getPriceTerms,
  getUnitsTerms,
  setProductDetail,
} from "@/hooks/ProductReducers";
import { getCompanyProfile } from "@/hooks/company";
import { getProductId } from "@/components/common/common";
import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
import Head from "next/head";
const categories = [
  {
    label: "Power Generation",
    items: ["Solar", "Wind", "Hydroelectric", "Geothermal", "Nuclear", "Coal"],
  },
  { label: "Energy", items: ["Solar Energy", "Wind Energy", "Nuclear Energy"] },
  { label: "Solar Energy", items: ["Solar Panels", "Solar Trackers"] },
];

//  debounce function
const debounce = (func, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
    }, delay);
  };
};

const EditProduct = (props) => {
  const { formik, getBrands } = EditProductFormik();
  const { query }: any = useRouter();
  const [category_lists, setCategories] = useState<any>([]);

  const [productApplicationOptions, setProductApplicationOptions] =
    useState<any>([]);
  const [productUseCaseOptions, setProductUseCaseOptions] = useState<any>([]);
  const [published, setPublished] = useState("");
  const [placeholder, setIsPlaceholder] = useState("");
  const { productDetail } = useSelector((state: any) => state.editProduct);
  const { photos } = productDetail;
  const [compeletedFields, setCompletedFields] = useState<any>({
    category: false,
    information: false,
    description: false,
    specification: false,
    commercial: false,
    images: false,
    editing: false,
  });
  const [accordionValue, setAccordianValue] = useState<string>("category");
  const [loader, setLoader] = useState<boolean>(true);
  const [descriptionBlock, setDescriptionBlock] = useState<any>({
    disable: true,
    expanded: false,
  });
  const [information, setInformationBlock] = useState<any>({
    disable: true,
    expanded: false,
  });
  const [specification, setSpecificationBlock] = useState<any>({
    disable: true,
    expanded: false,
  });
  const [commercial_information, setCommercialBlock] = useState<any>({
    disable: true,
    expanded: false,
  });
  const [images, setImagesBlock] = useState<any>({
    disable: true,
    expanded: false,
  });
  const [smart_editing, setSmartBlock] = useState<any>({
    disable: true,
    expanded: false,
  });
  const [availability, setProductAvailability] = useState<string>("");
  const [percentage, setPercentage] = useState<any>([
    { name: "empty", value: 0 },
  ]);
  useEffect(() => {
    if (photos?.length > 0) {
      setImagesBlock({ disable: false, expanded: true });
    } else {
      setImagesBlock({ disable: true, expanded: false });
    }
  }, [photos]);
  const dispatch = useAppDispatch();
  const HandlePercentage = (name, value) => {
    let finalValue;

    if (name === "category_sector") {
      finalValue = 8.976660682;
    } else if (name === "category_parent_category") {
      finalValue = 5.642728905;
    } else if (name === "") {
      // finalValue = 6.642728905;
    } else {
      finalValue = parseFloat(value);
      if (isNaN(finalValue)) {
        finalValue = 0;
      }
    }
    finalValue = Math.round(finalValue * 100) / 100;
    setPercentage((prev) => {
      const index = prev.findIndex((v) => v.title === name);
      if (index >= 0) {
        return prev.map((item, idx) =>
          idx === index ? { ...item, value: finalValue } : item
        );
      } else {
        return [...prev, { title: name, value: finalValue }];
      }
    });
  };

  const HandleAccordian = (name) => {
    setAccordianValue((prev) => {
      if (prev === name) {
        return "";
      }
      return name;
    });
  };

  const [showPadding, setShowPadding] = useState(false);

  const handleScroll = () => {
    if (window.scrollY > 0) {
      setShowPadding(true);
    } else {
      setShowPadding(false);
    }
  };
  React.useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
  useEffect(() => {
    dispatch(setToggleNavbar(true));
    dispatch(getCurrencyList());
    dispatch(getPriceTerms());
    dispatch(getUnitsTerms());
    dispatch(getCompanyProfile())
    getBrands();
  }, []);

  // useEffect(() => {
  //   if (images.disable && compeletedFields.images) {
  //     setImagesBlock({ disable: false, expanded: true });
  //   }
  // }, [compeletedFields, images]);

  useEffect(() => {
    if (
      availability === "" &&
      productDetail?.availability &&
      availability !== productDetail.availability
    ) {
      setProductAvailability(productDetail?.availability);
    }
  }, [availability, productDetail?.availability]);

  const product_id = getProductId();
  const getUniqueByName = (data) => {
    const map = new Map();
    return data.filter((item) => {
      if (!map.has(item.name)) {
        map.set(item.name, true);
        return true;
      }
      return false;
    });
  };

  const fetchProductApplicationAndCasesList = async () => {
    if (category_lists?.length == 0) {
      return;
    }
    let category_id = category_lists?.map((ele) => ele?.id);
    if (category_id?.length == 0) {
      return;
    }
    try {
      const response = await fetch(
        `${BASE_URL}/product-application/suggested-product-application-usecase?id=${category_id?.join(
          ","
        )}&category_id=${category_id?.join(",")}`,
        {
          method: "GET",
          headers: {
            // "Content-Type": "application/json",
            Authorization: `Bearer ${Auth?.token()}`,
          },
        }
      );
      if (response.status == 200) {
        const { product_application, product_use_case } = await response.json();
        // setProductApplicationOptions(product_application);
        // setProductUseCaseOptions(product_use_case);

        const uniqueProductApplication = getUniqueByName(product_application);
        const uniqueProductUseCase = getUniqueByName(product_use_case);

        setProductApplicationOptions(uniqueProductApplication);
        setProductUseCaseOptions(uniqueProductUseCase);
      }
    } catch (error) {
      throw new Error(error ?? "Something went wrong while fetching the data");
    }
  };

  const FetchProductDetail = async () => {
    let formData = new FormData();
    formData.append("id", query?.Id);
    const { data } = await axios.post(
      `${BASE_URL}/product/view/single/list`,
      formData,
      {
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: `Bearer ${Auth.token()}`,
        },
      }
    );
    if (data.data?.length > 0) {
      // await fetchProductApplicationAndCasesList();
      localStorage.setItem("productCurrency", data?.data[0]?.currency_id);
      dispatch(setProductDetail(data.data[0]));
      setLoader(false);
      setPublished(data.data[0]?.published);
      setIsPlaceholder(data.data[0]?.is_placeholder);
      setCategories(
        data?.data[0]?.category_lists.map((v, i) => ({
          ...v,
          level: i + 1,
        }))
      );
      formik.setFieldValue("availability", data?.data[0]?.availability ?? "");
    }
  };

  useEffect(() => {
    if (query?.Id) {
      FetchProductDetail();
    }
    return () => {
      setProductDetail({});
    };
  }, [query]);

  const HeaderWithToolTip = (name, tooltip = null) => {
    return (
      <Heading>
        {name}
        <LightTooltip title="Required" arrow placement="top">
          <span style={{ color: "#d32f2f" }}> * </span>
        </LightTooltip>
        {tooltip && (
          <LightTooltip placement={"top"} title={tooltip} arrow>
            {
              <span
                style={{
                  display: "inline-block",
                  position: "relative",
                  width: "16px",
                  height: "16px",
                }}
              >
                <Image src={"/assets/helpIcon.svg"} layout="fill" alt="image" />{" "}
              </span>
            }
          </LightTooltip>
        )}
      </Heading>
    );
  };

  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", handleScrollTop);
    return () => {
      window.removeEventListener("scroll", handleScrollTop);
    };
  }, []);

  const handleScrollTop = () => {
    const scrollTop = window.pageYOffset;
    if (scrollTop > 100) {
      setIsScrolled(true);
    } else {
      setIsScrolled(false);
    }
  };

  ////// Common search
  const [inputValue, setInputValue] = React.useState("");
  const [options, setOptions] = React.useState<string[]>([]);
  const [showOptions, setShowOptions] = React.useState(false);
  const [selectedItem, setSelectedItem] = React.useState<{
    category: string;
    item: string;
  } | null>(null);

  const handleSearchClick = () => {
    setShowOptions(false);
  };

  React.useEffect(() => {
    if (inputValue) {
      const filteredOptions = categories
        .map((category) =>
          category.items.filter((item) =>
            item.toLowerCase().includes(inputValue.toLowerCase())
          )
        )
        .flat();

      setOptions(filteredOptions);
    } else {
      setOptions([]);
    }
  }, [inputValue]);

  const handleItemSelect = (item: string) => {
    const selectedCategory = categories.find((category) =>
      category.items.includes(item)
    );
    if (selectedCategory) {
      setSelectedItem({ category: selectedCategory.label, item });
      setShowOptions(false);
    }
  };

  const [searchQuery, setSearchQuery] = useState("");
  const [searchOptions, setSearchOptions] = useState<any>([]);
  const [refetchlist, setRefetchlist] = useState<any>(false);
  const [optionsNotFound, setOptionsNotFound] = useState(false);

  const fetchSearchData = async (query: string) => {
    if (!query.trim() || query.includes(">")) {
      setOptionsNotFound(false);
      setSearchOptions([]);
      return;
    }
    setOptionsNotFound(false);

    try {
      const fetchResponse = await fetch(
        `${BASE_URL}/category/categoryTree?search=${query}`,
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${Auth.token()}`,
          },
        }
      );

      if (fetchResponse.ok) {
        const response = await fetchResponse.json();
        if (response?.data?.length == 0) {
          setOptionsNotFound(true);
          return;
        }
        const updatedSearchData = createAutocompleteOptions(response?.data);
        setSearchOptions(updatedSearchData);
      } else {
        setOptionsNotFound(true);
      }
    } catch (error) {}
  };

  const debouncedFetchResults = useCallback(
    debounce((query) => fetchSearchData(query), 1000),
    []
  );

  const handleInputChange = (newInputValue: string) => {
    setOptionsNotFound(false);
    setInputValue(newInputValue);
    if (!newInputValue.trim()) {
      setShowOptions(false);
      setSearchOptions([]);
      return;
    }
    setShowOptions(true);
    setSearchQuery(newInputValue);
    debouncedFetchResults(newInputValue);
  };

  const createAutocompleteOptions = (categories) => {
    if (categories?.lenght == 0) {
      return [];
    }

    const result = [];

    const traverse = (node, path = [], data = []) => {
      if (!node) return;

      // Update path and data arrays
      const newPath = [...path, node.name];
      const newData = [
        ...data,
        {
          id: node.id,
          parent_id: node.parent_id,
          level: node.level + 1,
          name: node.name,
        },
      ];

      // If the node has no further subcategories, push to result
      if (!node.sub_category) {
        result.push({
          view: newPath.join(" > "),
          data: newData,
        });
      }

      // Traverse sub_category if it exists
      if (node.sub_category) {
        traverse(node.sub_category, newPath, newData);
      }
    };

    // Start traversal for each top-level category
    categories?.forEach((category) => traverse(category));

    return result;
  };

  return (
    <>
      <Head>
        <title>Edit Product | Powercozmo</title>
      </Head>
      <Box
        sx={{
          ".MuiCheckbox-root": {
            position: "relative",
            "& .MuiSvgIcon-root": {
              display: "none",
            },
            "&:before": {
              content: '" "',
              display: "block",
              width: "1rem",
              height: "1rem",
              border: "1px solid #a6a6a6",
              borderRadius: "4px",
            },
            "&:after": {
              content: '" "',
              display: "inline-block",
              transform: "rotate(45deg)",
              width: "4px",
              height: "8px",
              borderBottom: "2px solid #D7282F",
              borderRight: "2px solid #D7282F",
              position: "absolute",
              // top: "11px",
              opacity: "0",
              margin: "-4px 0 0 0",
            },
            "&:hover": {
              "&:before": {
                borderColor: "#b1b0b0",
              },
            },
            "&.Mui-checked": {
              "&:after": {
                opacity: "1",
              },
              "&:before": {
                borderColor: "#D7282F",
              },
            },
          },
        }}
      >
        <StickyHeaderStyle className="top_header">
          <div className={`editfixed-header ${isScrolled ? "show" : "hide"}`}>
            <PreHeaderText>
              <Box>
                <Typography
                  sx={{ fontSize: "19px", fontWeight: "600", color: "#000","&::first-letter": { textTransform: "uppercase" } }}
                >
                  {" "}
                  {productDetail?.name ? `${productDetail.name}` : ""}
                </Typography>

                <HideOnScrollContentt>
                  <SelectCategoryText
                    sx={{
                      "& .firstChild:nth-of-type(1)": {
                        color: "#d7282f",
                      },
                    }}
                  >
                    {category_lists[0]?.icon && (
                      <Image
                        src={category_lists[0]?.icon}
                        height={15}
                        width={15}
                        alt="Category"
                      />
                    )}
                    {category_lists?.map((element, index) => (
                      <>
                        <CategoryBoxSmall
                          className="firstChild"
                          sx={{
                            margin: "0 4px 0 0",
                            background: "none",
                            border: "none",
                            "&:first-child": {
                              color: "#d7282f",
                              fontWeight: "500",
                            },
                          }}
                          key={element?.id || index}
                          style={{}}
                        >
                          {element?.name
                            .split(" ")
                            .map(
                              (w) =>
                                w.substring(0, 1).toUpperCase() + w.substring(1)
                            )
                            .join(" ")}
                        </CategoryBoxSmall>
                        {category_lists?.length - 1 != index && (
                          <BreadcrumbArrow sx={{ margin: "-8px 8px 0 4px" }}>
                            <i className="icon-arrowRight"></i>
                          </BreadcrumbArrow>
                        )}
                      </>
                    ))}
                  </SelectCategoryText>
                </HideOnScrollContentt>
              </Box>
              {productDetail?.product_type == "configured" && (
                <text className={poststyle.productType}>Configuration</text>
              )}
            </PreHeaderText>
          </div>
        </StickyHeaderStyle>

        <OuterContainer className={poststyle.creat_post_page}>
          {loader ? (
            <EditPostSkelton />
          ) : (
            <>
              <InnerLeftContainer className={poststyle.creat_post_left}>
                <div className={poststyle.create_post_inn}>
                  <EditPostAccordion>
                    <PreHeaderText>
                      <Typography className="editproductt" sx={{"&::first-letter": { textTransform: "uppercase" }}}>
                        {" "}
                        {productDetail?.name ? `${productDetail.name}` : ""}
                      </Typography>
                      {productDetail?.product_type == "configured" && (
                        <text className={poststyle.productType}>
                          Configuration
                        </text>
                      )}
                    </PreHeaderText>
                    {loader ? (
                      <Box
                        sx={{
                          display: "flex",
                          justifyContent: "center",
                          alignItems: "center",
                          height: "80vh",
                          width: "100%",
                        }}
                      >
                        <Image
                          src="/assets/Loader/Power-Logo-Loader.gif"
                          height={100}
                          width={100}
                          alt={""}
                        />
                      </Box>
                    ) : (
                      <>
                        <Accordion
                          expanded={accordionValue === "category"}
                          onChange={() => HandleAccordian("category")}
                        >
                          <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel1a-content"
                            id="panel1a-header"
                          >
                            <AccordionHeading>
                              {HeaderWithToolTip(
                                " Product Category",
                                "Choose from a predefined list or introduce a new category to enhance product discovery and categorization."
                              )}
                              <SubHeading>
                                Identify the category that most accurately
                                characterizes your product's primary function.
                              </SubHeading>
                              {category_lists?.length > 0 &&
                                accordionValue !== "category" && (
                                  <CategorySelector>
                                    <RightContent>
                                      <SelectCategory>
                                        Selected Categories:
                                      </SelectCategory>
                                      <SelectCategoryText>
                                        {category_lists?.map(
                                          (element, index) => (
                                            <>
                                              <CategoryContainerSmall
                                                key={element?.id || index}
                                                style={{}}
                                              >
                                                {element?.name
                                                  .split(" ")
                                                  .map(
                                                    (w) =>
                                                      w
                                                        .substring(0, 1)
                                                        .toUpperCase() +
                                                      w.substring(1)
                                                  )
                                                  .join(" ")}
                                              </CategoryContainerSmall>
                                            </>
                                          )
                                        )}
                                      </SelectCategoryText>
                                    </RightContent>
                                  </CategorySelector>
                                )}
                            </AccordionHeading>
                          </AccordionSummary>

                          <AccordionDetails>
                            <SearchForCommonCateory>
                              <Box>
                                <Autocomplete
                                  size="small"
                                  value={null}
                                  inputValue={inputValue}
                                  options={searchOptions || []}
                                  getOptionLabel={(option: any) =>
                                    option.view || ""
                                  }
                                  noOptionsText={
                                    optionsNotFound
                                      ? "No categories available with this name. Please try some different category."
                                      : "Loading..."
                                  }
                                  open={showOptions}
                                  onInputChange={(event, newInputValue) =>
                                    handleInputChange(newInputValue)
                                  }
                                  onChange={(event: any, newValue: any) => {
                                    if (newValue) {
                                      if (newValue?.data?.length > 0) {
                                        setCategories(newValue.data);
                                      }
                                      setRefetchlist(true);

                                      setInputValue("");
                                      setShowOptions(false);
                                      setSearchOptions([]);
                                    }
                                  }}
                                  renderInput={(params) => (
                                    <TextField
                                      {...params}
                                      label="Search Categories"
                                      variant="outlined"
                                      fullWidth
                                      InputProps={{
                                        ...params.InputProps,
                                        endAdornment: (
                                          <InputAdornment position="end">
                                            <SearchHere
                                              variant="contained"
                                              onClick={() => {
                                                if (!searchQuery.trim()) return;
                                                debouncedFetchResults(
                                                  searchQuery
                                                );
                                              }}
                                              startIcon={<SearchRoundedIcon />}
                                            />
                                          </InputAdornment>
                                        ),
                                      }}
                                    />
                                  )}
                                  renderOption={(props, option) => (
                                    <li {...props}>{option.view}</li>
                                  )}
                                />
                                {selectedItem && (
                                  <CategorySelectorSearch>
                                    <Breadcrumbs
                                      aria-label="breadcrumb"
                                      separator={
                                        <i className="icon-arrowRight"></i>
                                      }
                                    >
                                      {/* Main Category in Red */}
                                      <Typography
                                        variant="body2"
                                        sx={{
                                          fontWeight: "600",
                                          color: "#d7282f !important",
                                        }}
                                      >
                                        {selectedItem.category}
                                      </Typography>
                                      <Box>
                                        <Typography variant="body2">
                                          {selectedItem.item}
                                        </Typography>
                                      </Box>
                                    </Breadcrumbs>
                                  </CategorySelectorSearch>
                                )}
                              </Box>
                            </SearchForCommonCateory>
                            <ProductCategories
                              setRetchList={setRefetchlist}
                              refetchlist={refetchlist}
                              setDescriptionBlock={setDescriptionBlock}
                              setCompletedFields={setCompletedFields}
                              setAccordianValue={setAccordianValue}
                              category_lists={category_lists}
                              setLoader={setLoader}
                              loader={loader}
                              FetchProductDetail={FetchProductDetail}
                              setPublished={setPublished}
                              setCategories={setCategories}
                              productDetail={productDetail}
                              setProductDetail={setProductDetail}
                              percentage={percentage}
                              HandlePercentage={HandlePercentage}
                            />
                          </AccordionDetails>
                        </Accordion>

                        <Accordion
                          disabled={descriptionBlock.disable}
                          expanded={accordionValue === "description"}
                          onChange={(e) => {
                            e.stopPropagation();
                            HandleAccordian("description");
                          }}
                        >
                          <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel2a-content"
                            id="panel2a-header"
                          >
                            <ProductSectionHeaderContainer>
                              {HeaderWithToolTip("Product Description")}
                              <SubHeading>
                                Provide product Description with a short
                                description and file upload capability.
                              </SubHeading>
                            </ProductSectionHeaderContainer>
                          </AccordionSummary>
                          <AccordionDetails>
                            <ProductDescription
                              accordionValue={accordionValue}
                              FetchProductDetail={FetchProductDetail}
                              productApplicationOptions={
                                productApplicationOptions
                              }
                              setProductApplicationOptions={
                                setProductApplicationOptions
                              }
                              fetchProductApplicationAndCasesList={
                                fetchProductApplicationAndCasesList
                              }
                              productUseCaseOptions={productUseCaseOptions}
                              setProductUseCaseOptions={
                                setProductUseCaseOptions
                              }
                              // fetchKeywords={fetchKeywords}
                              category_lists={category_lists}
                              setInformationBlock={setInformationBlock}
                              HandlePercentage={HandlePercentage}
                              setCompletedFields={setCompletedFields}
                              setAccordianValue={setAccordianValue}
                              // productDetail={productDetail}
                              setPublished={setPublished}
                              setProductDetail={setProductDetail}
                              // selectedKeywords={selectedKeywords}
                              // setSelectedKeywords={setSelectedKeywords}
                              // suggestedKeywords={suggestedKeywords}
                              // setSuggestedKeywords={suggestedKeywords}
                              percentage={percentage}
                            />
                          </AccordionDetails>
                        </Accordion>

                        <Accordion
                          disabled={information.disable}
                          expanded={accordionValue === "information"}
                          onChange={() => HandleAccordian("information")}
                        >
                          <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel3a-content"
                            id="panel3a-header"
                          >
                            <AccordionHeading>
                              {HeaderWithToolTip(
                                "Product Information",
                                availability == "in_stock"
                                  ? `In Stock are generally warehouse/inventory goods.`
                                  : '"By Order" are yet to be manufactured.'
                              )}
                              <SubHeading>
                                Please choose if the product is in stock or to
                                be manufactured against order.
                              </SubHeading>
                            </AccordionHeading>
                          </AccordionSummary>
                          <AccordionDetails>
                            <ProductInfo
                              accordionValue={accordionValue}
                              availability={availability}
                              setPublished={setPublished}
                              setProductAvailability={setProductAvailability}
                              setSpecificationBlock={setSpecificationBlock}
                              HandlePercentage={HandlePercentage}
                              setCompletedFields={setCompletedFields}
                              setAccordianValue={setAccordianValue}
                              productDetail={productDetail}
                              FetchProductDetail={FetchProductDetail}
                              percentage={percentage}
                              category_lists={category_lists}
                            />
                          </AccordionDetails>
                        </Accordion>

                        <Accordion
                          disabled={specification.disable}
                          expanded={accordionValue === "specification"}
                          onChange={() => HandleAccordian("specification")}
                        >
                          <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel6a-content"
                            id="panel6a-header"
                          >
                            <ProductSectionHeaderContainer>
                              {HeaderWithToolTip(
                                "Product features & Characteristics"
                              )}
                              <SubHeading>
                                Detail your product with their general technical
                                specifications and available ranges.
                              </SubHeading>
                            </ProductSectionHeaderContainer>
                          </AccordionSummary>
                          <AccordionDetails>
                            <ActivePassiveTab
                              FetchProductDetail={FetchProductDetail}
                              setCommercialBlock={setCommercialBlock}
                              HandlePercentage={HandlePercentage}
                              setPublished={setPublished}
                              setCompletedFields={setCompletedFields}
                              setAccordianValue={setAccordianValue}
                              category_lists={category_lists}
                              productDetail={productDetail}
                              setProductDetail={setProductDetail}
                              percentage={percentage}
                            />
                          </AccordionDetails>
                        </Accordion>

                        <Accordion
                          disabled={commercial_information.disable}
                          expanded={accordionValue === "commercial"}
                          onChange={() => HandleAccordian("commercial")}
                        >
                          <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel4a-content"
                            id="panel4a-header"
                          >
                            <ProductSectionHeaderContainer>
                              {HeaderWithToolTip("Commercial Information")}
                              <SubHeading>
                                Ensure all commercial details filled are
                                accurate and truthful so that your product is
                                reliable and attractive to potential buyers.
                              </SubHeading>
                            </ProductSectionHeaderContainer>
                          </AccordionSummary>
                          <AccordionDetails>
                            <CommercialInformation
                              setImagesBlock={setImagesBlock}
                              accordionValue={accordionValue}
                              setPublished={setPublished}
                              HandlePercentage={HandlePercentage}
                              setCompletedFields={setCompletedFields}
                              setAccordianValue={setAccordianValue}
                              productDetail={productDetail}
                              FetchProductDetail={FetchProductDetail}
                              percentage={percentage}
                            />
                          </AccordionDetails>
                        </Accordion>

                        <Accordion
                          disabled={images.disable}
                          expanded={accordionValue === "image"}
                          onChange={() => HandleAccordian("image")}
                          sx={{
                            "&.MuiButtonBase-root.MuiAccordionSummary-root.Mui-focusVisible":
                              {
                                backgroundColor: "#fff !important",
                              },
                          }}
                        >
                          <AccordionSummary
                            sx={{
                              "&.MuiButtonBase-root.MuiAccordionSummary-root.Mui-focusVisible":
                                {
                                  backgroundColor: "#fff !important",
                                },
                            }}
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel7a-content"
                            id="panel7a-header"
                          >
                            <ProductSectionHeaderContainer>
                              {HeaderWithToolTip(
                                "Upload Product Images",
                                "Upload high-resolution images with white or transparent background that clearly showcase your product from different angles and in various conditions. This helps buyers get a comprehensive view of the product and its features."
                              )}
                              <SubHeading>
                                Enrich the product's visual presentation by
                                including uploaded images.
                              </SubHeading>
                            </ProductSectionHeaderContainer>
                          </AccordionSummary>
                          <AccordionDetails>
                            <UploadProducts
                              setSmartBlock={setSmartBlock}
                              setPublished={setPublished}
                              setCompletedFields={setCompletedFields}
                              setAccordianValue={setAccordianValue}
                              productDetail={productDetail}
                              HandlePercentage={HandlePercentage}
                              percentage={percentage}
                            />
                          </AccordionDetails>
                        </Accordion>
                        <Accordion
                          disabled={smart_editing.disable}
                          expanded={accordionValue === "smart_editing"}
                          onChange={() => HandleAccordian("smart_editing")}
                        >
                          <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel5a-content"
                            id="panel5a-header"
                          >
                            <ProductSectionHeaderContainer>
                              {HeaderWithToolTip(
                                "Description",
                                "Choose readymade template blocks to add the description of the productProvide a clear and detailed description of your product, highlighting key features, technical specifications, benefits, and any relevant information to help buyers understand its value and suitability."
                              )}
                              <SubHeading>
                                Find in-depth product descriptions and related
                                information in the Description tab.
                              </SubHeading>
                            </ProductSectionHeaderContainer>
                          </AccordionSummary>
                          <AccordionDetails>
                            <Editing
                              FetchProductDetail={FetchProductDetail}
                              setPublished={setPublished}
                              setAccordianValue={setAccordianValue}
                              HandlePercentage={HandlePercentage}
                              setCompletedFields={setCompletedFields}
                              productDetail={productDetail}
                              percentage={percentage}
                            />
                          </AccordionDetails>
                        </Accordion>
                      </>
                    )}
                  </EditPostAccordion>
                </div>
              </InnerLeftContainer>
              <div className={poststyle.creat_post_right}>
                <StaticRightContent
                  percentage={percentage}
                  compeletedFields={compeletedFields}
                  // productDetail={productDetail}
                  setPublished={setPublished}
                  published={published}
                  fetchList={FetchProductDetail}
                  setAccordianValue={setAccordianValue}
                  placeHolder={placeholder}
                />
              </div>
            </>
          )}
        </OuterContainer>
      </Box>
    </>
  );
};

export default EditProduct;