import React from "react";
import { HexColorPicker } from "react-colorful";
import { useEffect, useRef, useState } from "react";
import ColorInput from "./colorInput";
import { hexToRgb } from "../../util/colorUtil";
import Button from "../elements/button";
import useClickOutside from "../../customHooks/useClickOutside";
import PopOver from "../popOver/popOver";

type ColorPickerSectionProps = Readonly<{
  hex: string;
  setHex: React.Dispatch<React.SetStateAction<string>>;
}>;

export type RGBType = { r: number; g: number; b: number };

export default function ColorPickerSection({
  hex,
  setHex,
}: ColorPickerSectionProps) {
  const [currentRGB, setCurrentRGB] = useState<RGBType>();
  const [showPicker, setShowPicker] = useState<boolean>(false);
  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
  const buttonRef = useRef<HTMLDivElement>(null);
  const popoverRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const rgbValue = hexToRgb(hex);
    setCurrentRGB(rgbValue);
  }, [hex]);

  const togglePicker = (value?: boolean) => {
    if (buttonRef.current) {
      const rect = buttonRef.current.getBoundingClientRect();
      setPopoverStyle({
        position: "fixed",
        top: rect.bottom - 80,
        right: rect.right - rect.width * 5,
      });
    }
    setShowPicker((c) => value ?? !c);
  };

  useClickOutside(
    popoverRef as React.RefObject<HTMLDivElement>,
    showPicker,
    () => setShowPicker(false)
  );

  return (
    <div className="rounded-lg bg-white">
      <div className="flex flex-col items-center sm:flex-row justify-between w-full gap-6">
        <div className="w-full">
          <ColorInput
            hex={hex}
            rgb={currentRGB}
            setHex={setHex}
            setRGB={setCurrentRGB}
          />
        </div>
        {showPicker && (
          // Popover for the color picker

          <PopOver>
            <div
              className="z-10 p-6 w-80 md:w-104 shadow-xl border-2 rounded-lg bg-white"
              ref={popoverRef}
              style={popoverStyle}
            >
              <div className="p-4 w-full border  border-neutral-light rounded-xl">
                <HexColorPicker
                  className="!w-full"
                  color={hex}
                  onChange={setHex}
                />
              </div>
              <div className="flex justify-end">
                <Button
                  onClick={() => setShowPicker(false)}
                  text="Fertig"
                  type="Primary"
                  className="py-3 px-6 mt-6"
                />
              </div>
            </div>
          </PopOver>
        )}
        <div className="md:block hidden">
          <div
            ref={buttonRef}
            onClick={() => togglePicker()}
            className="relative hover:cursor-pointer w-20 h-20 rounded-xl"
            style={{ backgroundColor: hex }}
          />
        </div>
      </div>
    </div>
  );
}