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

import { ModifierPanelProps } from '@components/DesignPanel/types';
import { useStore } from 'zustand';
import { DesignContext } from '@components/DesignPanel/DesignStore';
import { useActiveOptionValue } from '@components/DesignPanel/hooks/useActiveOptionvalue';
import { ToggleGroup } from '@components/ui/ToggleGroup';
// import { DropdownPicker } from '@components/ui/DropdownPicker';
import BoxIcon from 'blockbite-icons/dist/Box';
import GridIcon from 'blockbite-icons/dist/Grid';
import EyeClosedIcon from 'blockbite-icons/dist/EyeClosed';

export const LayoutOptions = [
  {
    label: 'Flex',
    value: 'flex',
    icon: <BoxIcon />,
  },
  {
    label: 'Grid',
    value: 'grid',
    icon: <GridIcon />,
  },
  {
    label: 'Hidden',
    value: 'hidden',
    icon: <EyeClosedIcon />,
  },
];

export const ModifierPanel: React.FC<ModifierPanelProps> = ({
  currentControlId,
  emitOptions,
}) => {
  const [layoutValue, setLayoutValue] = useState('flex');
  const store = useStore(useContext(DesignContext));

  const activeLayoutValue = useActiveOptionValue('flextype', store);

  useEffect(() => {
    setLayoutValue(activeLayoutValue);
  }, [activeLayoutValue]);

  return (
    <div key={`Layout${currentControlId}`}>
      <ToggleGroup
        display="icon"
        defaultPressed={layoutValue}
        onPressedChange={(value) => {
          setLayoutValue(value);
          emitOptions([{ id: 'flextype', value: value }]);
        }}
        size="default"
        className="w-[180px]"
        options={LayoutOptions}
      ></ToggleGroup>
    </div>
  );
};

export default ModifierPanel;