import React, {
  useEffect,
  useState,
} from 'react';

import {
  ChevronsUpDown,
  XIcon,
} from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerEyeDropper,
  ColorPickerHueSlider,
  ColorPickerInput,
  ColorPickerSwatch,
  ColorPickerTrigger,
} from '@/components/ui/color-picker';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import { Lang } from '@/lang/Lang';

import DataDescription from './components/DataDescription';
import DataLabel from './components/DataLabel';
import { ItemDataProps } from './types';

export const ColorData = (props: ItemDataProps) => {



  const [localValue, setLocalValue] = useState(props.getValue());

  useEffect(() => {
    props.setValue(localValue);
  }, [localValue]);

  const [isOpen, setIsOpen] = useState(false);

  if (props.onlyShow || !props.structure.editable) {
    return <div>
      <DataLabel {...props} />
      <div className="flex items-center gap-3 w-full">
        <div
          style={{ backgroundColor: localValue }}
          className="w-full h-10 bg-gray-200 rounded-md"></div>
      </div>
      <DataDescription {...props} />
    </div>
  }




  if (!!props.structure.palette?.length) {
    return <div>
      <DataLabel {...props} />

      <Popover>
        <PopoverTrigger asChild>
          <Button
            className='w-full justify-between'
            variant="outline">{!localValue ? Lang.key('pick_color') : <span style={{ backgroundColor: localValue }} className="w-full h-6 rounded-md"></span>}</Button>
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="flex flex-wrap gap-2">
            {props.structure.palette?.map((item) => (
              <div key={item}
                style={{ backgroundColor: item, opacity: item === localValue ? 1 : 0.5 }}
                className="w-10 h-10 bg-gray-200 rounded-md cursor-pointer"
                onClick={() => setLocalValue(item)}
              ></div>
            ))}
          </div>
        </PopoverContent>
      </Popover>
      <DataDescription {...props} />
    </div>
  }

  return (
    <React.Fragment>
      <DataLabel {...props} />

      <div className="flex items-center gap-1 w-full">
        <ColorPicker
          value={localValue}
          onValueChange={setLocalValue}
          open={isOpen}
          onOpenChange={setIsOpen}
          className="w-full"
        >
          <ColorPickerTrigger asChild>
            <Button variant="outline" className="flex items-center gap-2 w-full">
              <ColorPickerSwatch className="size-4" />
              {!localValue ? Lang.key('pick_color') : localValue}
              <ChevronsUpDown className="opacity-50" />
            </Button>
          </ColorPickerTrigger>
          <ColorPickerContent>
            <ColorPickerArea />
            <div className="flex items-center gap-2">
              <ColorPickerEyeDropper />
              <ColorPickerHueSlider />
            </div>
            <ColorPickerInput />
          </ColorPickerContent>
        </ColorPicker>

        <Button variant="outline" onClick={() => setLocalValue(null)}>
          <XIcon />
        </Button>
      </div>

      <DataDescription {...props} />
    </React.Fragment>
  );
}
