import { useState, useEffect } from "react";
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/ui/popover";
import { Input } from "@/components/ui/input";
import { HexColorPicker } from "react-colorful";
import { useIconPicker } from "./IconPickerContext";
import { useDebouncedCallback } from "use-debounce";

export function IconColorPicker() {
  const { color, setColor } = useIconPicker();
  // Local state for immediate UI feedback
  const [localColor, setLocalColor] = useState<string>(color);

  // Sync localColor when context color changes externally
  useEffect(() => {
    setLocalColor(color);
  }, [color]);

  // Debounce context updates
  const debouncedSetColor = useDebouncedCallback((val: string) => {
    setColor(val);
  }, 500);

  const handleChange = (val: string) => {
    setLocalColor(val);
    debouncedSetColor(val);
  };

  return (
    <div className='flex flex-col'>
      <Popover>
        <PopoverTrigger asChild>
          {/* Swatch button */}
          <button
            type='button'
            className='w-9 h-9 rounded-md border shadow-sm'
            style={{ backgroundColor: localColor }}
          />
        </PopoverTrigger>

        <PopoverContent align='end' className='p-4 w-58'>
          {/* Main color picker */}
          <HexColorPicker color={localColor} onChange={handleChange} />

          {/* Hex input for fine-tuning */}
          <div className='mt-3'>
            <Input
              value={localColor}
              maxLength={7}
              onChange={(e) => handleChange(e.target.value)}
              className='w-full text-xs font-mono'
            />
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}