import { cadastrarCor, editarCores } from "@/requests/CRM/Cor/cadastrarCor";
import { listarCores } from "@/requests/CRM/Cor/listarCor";
import { useEffect, useState } from "react";
import { SketchPicker } from "react-color";
import { createPortal } from "react-dom";
import { MdOutlineColorLens } from "react-icons/md";

const PopoverCorFunil = ({
  defaultValues,
  form,
  isCorFunil = false,
  corFunil = null,
}: any) => {
  const [corDefault, setCorDefault] = useState(defaultValues);
  const [mostrarColorPicker, setMostrarColorPicker] = useState(false); // Estado para controlar a exibição do color picker
  const [corCustomizada, setCorCustomizada] = useState(""); // Estado para armazenar a cor customizada
  const [coresPersonalizadas, setCoresPersonalizadas] = useState<any>([]);

  const cores = [
    "#d71295",
    "#ed678d",
    "#6c7395",
    "#87896b",
    "#0a913b",
    "#3d4e81",
    "#ac0214",
    "#1415be",
    "#e3f43b",
    "#00e403",
    "#f79256",
    "#008080",
    "#663399",
    "#ff00ff",
    "#000000",
  ];

  useEffect(() => {
    listagem();
  }, []);

  const listagem = () => {
    listarCores().then((res) => {
      setCoresPersonalizadas(res);
    });
  };
  const handleChangeCor = (cor: string) => {
    setCorDefault(cor);
    form.setValue("cor_etapa_funil" as never, cor as never);
  };

  const handleChangeCorFunil = (cor: string) => {
    setCorDefault(cor);
    corFunil(cor);
  };

  const handleColorChange = (cor: any) => {
    setCorCustomizada(cor.hex);
    setCorDefault(cor.hex);
    !isCorFunil && form.setValue("cor_etapa_funil" as never, cor.hex as never);
  };

  const handleCustomColorSubmit = () => {
    if (corCustomizada != "") {
      cadastrarCor({ hex_cor: corCustomizada }).then(() => listagem());
    }
    setMostrarColorPicker(false);
  };

  return (
    <div className="mt-1 max-sm:text-sm">
      <div className="mb-2 text-black-2 dark:text-white"> Cores Padrões</div>
      <div className="grid grid-cols-5 gap-2 place-items-center">
        {cores.map((cor, index) => {
          return (
            <div
              key={index}
              onClick={() => {
                isCorFunil ? handleChangeCorFunil(cor) : handleChangeCor(cor);
              }}
              className={`h-6 w-10 rounded-sm cursor-pointer ${
                corDefault == cor && "border-black-2 border-2"
              }`}
              style={{ backgroundColor: cor }}
            ></div>
          );
        })}
      </div>
      <div className="mb-2 mt-2 text-black-2 dark:text-white">
        {" "}
        Cores Personalizadas
      </div>
      <div className="grid grid-cols-5 gap-2">
        {coresPersonalizadas.map((corPerson: any, index: any) => (
          <PersonColors
            key={index}
            corPerson={corPerson}
            corDefault={corDefault}
            setCorDefault={setCorDefault}
            handleColorChange={handleColorChange}
            isCorFunil={isCorFunil}
            handleChangeCorFunil={handleChangeCorFunil}
            handleChangeCor={handleChangeCor}
          />
        ))}
        {isCorFunil && coresPersonalizadas.length < 5 && (
          <div
            onClick={() => {
              setCorDefault(corCustomizada);
              setMostrarColorPicker(true);
            }}
            className={`flex flex-col justify-items-center items-center h-6 w-10 rounded-sm cursor-pointer ${
              corDefault == corCustomizada && "border-black-2 border-2"
            }`}
            style={{ backgroundColor: corCustomizada }}
          >
            <MdOutlineColorLens size={24} />
          </div>
        )}
        {mostrarColorPicker && isCorFunil && (
          <div
            style={{ position: "absolute", zIndex: 2, top: "80px" }}
            onMouseLeave={() => {
              handleCustomColorSubmit();
              setMostrarColorPicker(false);
            }}
            className=""
          >
            <SketchPicker color={corCustomizada} onChange={handleColorChange} />
          </div>
        )}
      </div>
    </div>
  );
};

export default PopoverCorFunil;

export const PersonColors = ({
  corPerson,
  corDefault,
  setCorDefault,
  isCorFunil,
  handleChangeCorFunil,
  handleChangeCor,
}: any) => {
  const [mostrarColorPickerEdit, setMostrarColorPickerEdit] = useState(false); // Estado para controlar a exibição do color picker
  const [corCustomizada, setCorCustomizada] = useState(""); // Estado para armazenar a cor customizada
  const [coords, setCoords] = useState({ top: 0, left: 0 });

  const handleColorChange = (cor: any) => {
    setCorCustomizada(cor.hex);
    setCorDefault(cor.hex);
  };

  return (
    <div className="flex justify-center">
      <div
        onClick={(e) => {
          isCorFunil
            ? handleChangeCorFunil(corCustomizada || corPerson.hex_cor)
            : handleChangeCor(corCustomizada || corPerson.hex_cor);
          setCorCustomizada(corCustomizada || corPerson.hex_cor);
          setCorDefault(corCustomizada || corPerson.hex_cor);
          setMostrarColorPickerEdit(true);

          const rect = e.currentTarget.getBoundingClientRect();
          setCoords({
            top: rect.top + window.scrollY - 310, // 310px é a altura média do SketchPicker para ficar ACIMA
            left: rect.left + window.scrollX - 100,
          });
        }}
        className={`h-6 w-10 rounded-sm cursor-pointer ${
          corDefault == (corCustomizada || corPerson.hex_cor) &&
          "border-black-2 border-2"
        }`}
        style={{ backgroundColor: corCustomizada || corPerson.hex_cor }}
      ></div>
      {mostrarColorPickerEdit &&
        createPortal(
          <div
            style={{
              position: "absolute",
              zIndex: 9999,
              top: `${coords.top}px`,
              left: `${coords.left}px`,
            }}
            onMouseLeave={() => {
              const data = {
                hex_cor: corCustomizada,
                id_cor: corPerson.id_cor,
              };
              editarCores(data), setMostrarColorPickerEdit(false);
            }}
            className=""
          >
            <SketchPicker color={corCustomizada} onChange={handleColorChange} />
          </div>,
          document.body,
        )}
    </div>
  );
};