import { apiClient } from "@/components/common/common";
import React, { useEffect, useState } from "react";
import { BtnFilled } from "@/components/common/buttons/ButtonsVariations";
import { ThreeDots } from "react-loader-spinner";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
import poststyle from "components/products/editProduct/style.module.css";
import { Button, TextField } from "@mui/material";
import Swal from "sweetalert2";

function AddUnitFieldPlaceholder({ commercialUnitList, setCommercialUnitList, setValue,accordionValue='' }) {
  const [addUnit, setAddUnit] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [unitName, setUnitName] = useState<string>("");
  const [errorText, setErrorText] = useState<string>("");
  const [error, setError] = useState<boolean>(false);
  const onSubmitHandler = async () => {
    if (unitName === "") {
      setError(true);
      setErrorText("Please enter unit name");
      return;
    }
    setLoading(true);
    let response = await apiClient("product/unit", "post", {
      body: { name: unitName },
    });

    if (response.status == 200) {
      const swalWithBootstrapButtons = Swal.mixin({
        customClass: {
          confirmButton: "custom-btn cancel-button",
          cancelButton: "custom-btn remove-btn",
        },
        buttonsStyling: false,
      });

      swalWithBootstrapButtons.fire({
        title: "Success",
        text: "Unit successfully added. You will receive a notification after admin approval.",
        icon: "success",
        showCancelButton: false,
        reverseButtons: true,
      });

      setAddUnit(false);
    } else {
      if (response.message) {
        setError(true);
        setErrorText(response.message);
      }
      // const swalWithBootstrapButtons = Swal.mixin({
      //   customClass: {
      //     confirmButton: "custom-btn cancel-button",
      //     cancelButton: "custom-btn remove-btn",
      //   },
      //   buttonsStyling: false,
      // });

      // swalWithBootstrapButtons.fire({
      //   title: "Error",
      //   text: response?.message?.[0],
      //   icon: "error",
      //   showCancelButton: false,
      //   reverseButtons: true,
      // });
    }
    setLoading(false);
  };

  const CloseAddUnit = () => {
    setUnitName("");
    setError(false);
    setErrorText("");
    setLoading(false);
    setAddUnit(false);
  };

    useEffect(() =>{
      if(addUnit && accordionValue != "commercial"){
        setUnitName("");
        setError(false);
        setErrorText("");
        setLoading(false);
        setAddUnit(false);
      }
    }, [accordionValue])

  return (
    <>
      <span
        className={poststyle.add_brand_txt}
        onClick={(e) => {
          e.preventDefault();
          setAddUnit(true);
        }}
      >
        <span style={{}}> + </span> Add Unit
      </span>
      {addUnit && (
        <span className={poststyle.add_brand_field}>
          <TextField
            value={unitName}
            onChange={(e) => {
              if (!/\d/g.test(e.target.value)) {
                setUnitName(e.target.value);
              }
              setError(false);
              setErrorText("");
            }}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
                onSubmitHandler();
              }
            }}
            size="small"
            placeholder="Enter Name"
            error={error}
            helperText={errorText}
          ></TextField>
          <BtnFilled
            className={poststyle.add_btn}
            onClick={(e) => {
              e.preventDefault();
              onSubmitHandler();
            }}
          >
            {loading ? (
              <ThreeDots
                height="40"
                width="40"
                radius="9"
                color="white"
                ariaLabel="three-dots-loading"
                wrapperStyle={{}}
                visible={true}
              />
            ) : (
              "Add"
            )}
          </BtnFilled>
          <Button
            className={poststyle.addbrand_cross}
            onClick={(e) => {
              e.preventDefault();
              CloseAddUnit();
            }}
            color="error"
          >
            <CloseOutlinedIcon
              style={{ cursor: "pointer", fontSize: "18px" }}
            />
          </Button>
        </span>
      )}
    </>
  );
}

export default AddUnitFieldPlaceholder;