import { useEffect, useState } from '@wordpress/element';

import { OptionPanelProps } from '@components/DesignPanel/types';
import AutocompleteDropdown from '@components/ui/AutocompleteDropdown';
import get from 'lodash/get';

export const ColorDropdown: React.FC<OptionPanelProps> = ({
  activeOptionValue,
  codex,
  emitOptions,
  modifierId,
}: any) => {
  const [colors, setColors] = useState<any[]>([]);

  // set colors from codex
  useEffect(() => {
    if (codex) {
      const colors = get(blockbite.codex, codex);
      setColors(colors);
    }
  }, [codex]);

  return (
    <div>
      {colors && colors.length ? (
        <AutocompleteDropdown
          defaultValue={activeOptionValue}
          swatch={true}
          options={colors.map((option: any) => ({
            label: option.label,
            value: option.id.toString(),
          }))}
          onPressedChange={(value) => {
            emitOptions([
              {
                id: modifierId,
                value,
              },
            ]);
          }}
        />
      ) : (
        <span>No Colors are defined</span>
      )}
    </div>
  );
};

export default ColorDropdown;