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 { getColorName } from '@/utils/helpers';

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) {


    const colorName = getColorName(localValue);




    return <div>
      <DataLabel {...props} />

      <Button variant="secondary" className='w-full flex items-center justify-start'>
        {!!localValue ? <>  <div
          style={{ backgroundColor: localValue }}
          className="w-6 h-6 bg-gray-200 rounded-sm"></div>
          {colorName && <div >{colorName}</div>}
        </> : <div>{Lang.key('no_data_short')}</div>}

      </Button>

      <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"
          tooltip={Lang.key('clear_color')}
          aria-label={Lang.key('clear_color')}
          onClick={() => setLocalValue(null)}
        >
          <XIcon />
        </Button>
      </div>

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