import { useContext } from '@wordpress/element';
import { DesignContext } from '@components/DesignPanel/DesignStore';
import CursorArrowIcon from 'blockbite-icons/dist/CursorArrow';
import HandIcon from 'blockbite-icons/dist/Hand';
import BoxIcon from 'blockbite-icons/dist/Box';
import LightningBoltIcon from 'blockbite-icons/dist/LightningBolt';
import { DropdownPicker } from '@components/ui/DropdownPicker';
import { ChapterDivider } from '@components/ui/ChapterDivider';
import { ToggleGroup } from '@components/ui/ToggleGroup';

import { useStore } from 'zustand';
import {
  InteractionPanelProps,
  InteractionOptionProps,
  InteractionProps,
} from '@components/DesignPanel/types';

export const InteractionPanel: React.FC<InteractionPanelProps> = ({}) => {
  const store = useContext(DesignContext);
  const { currentInteraction, setCurrentInteraction } = useStore(store);

  const options = [
    {
      label: 'Default',
      value: '',
      icon: BoxIcon,
    },
    {
      label: 'Hover',
      value: 'hover',
      icon: CursorArrowIcon,
    },
    {
      label: 'Actived Item',
      value: 'b_active',
      icon: LightningBoltIcon,
    },
    {
      label: 'Activated Child',
      id: 'b_active-child',
      icon: LightningBoltIcon,
    },
  ] as InteractionOptionProps[];

  const subOptions = [
    {
      label: 'Focus',
      value: 'focus',
      icon: HandIcon,
    },
    {
      label: 'Active',
      value: 'active',
      icon: HandIcon,
    },
    {
      label: 'Visited',
      value: 'visited',
      icon: HandIcon,
    },
    {
      label: 'Disabled',
      value: 'disabled',
      icon: HandIcon,
    },
    {
      label: 'Marker',
      value: 'marker',
      icon: HandIcon,
    },
    {
      label: 'odd',
      id: 'odd',
      icon: HandIcon,
    },
    {
      label: 'even',
      id: 'even',
      icon: HandIcon,
    },
  ] as InteractionOptionProps[];

  return (
    <div className="my-4 flex flex-wrap gap-1">
      <ChapterDivider title="Interaction"></ChapterDivider>
      <ToggleGroup
        display="icon"
        defaultPressed={currentInteraction}
        onPressedChange={(value: InteractionProps) => {
          setCurrentInteraction(value);
        }}
        size="default"
        className="w-[180px]"
        options={options}
      ></ToggleGroup>
      <DropdownPicker
        options={subOptions}
        defaultValue={currentInteraction}
        onPressedChange={(value: InteractionProps) => {
          setCurrentInteraction(value);
        }}
      />
    </div>
  );
};

export default InteractionPanel;