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

import { ModifierPanelProps } from '@components/DesignPanel/types';
import { getThemeOptions } from '@components/DesignPanel/Helpers';
import { SelectControl as SelectControlUi } from '@components/ui/SelectControl';

export const SelectControl: React.FC<ModifierPanelProps> = ({
  emitOptions,
  options,
  codex,
  modifierId,
  activeOptionValue,
}: any) => {
  const [currentOptions, setOptions] = useState<any[]>([]);

  useEffect(() => {
    if (codex && codex.includes('themeProvider')) {
      // get the provider (fonts, fontSizes, colors, etc)
      const provider = codex.replace('themeProvider.', '');
      const currentOptions = getThemeOptions(provider);
      setOptions(currentOptions);
    } else {
      setOptions(options);
    }
  }, [codex]);

  return (
    <div>
      <SelectControlUi
        options={currentOptions}
        defaultValue={activeOptionValue}
        onChange={(currentOption) => {
          emitOptions([
            {
              id: modifierId,
              value: currentOption,
            },
          ]);
        }}
      />
    </div>
  );
};

export default SelectControl;