import { useContext } from '@wordpress/element';
import { DesignContext } from '@components/DesignPanel/DesignStore';
import { ButtonToggle } from '@components/ui/ButtonToggle';

import TextAlignBottomIcon from 'blockbite-icons/dist/TextAlignBottom';
import ExclamationTriangleIcon from 'blockbite-icons/dist/ExclamationTriangle';
import isEmpty from 'lodash/isEmpty';
import { ChapterDivider } from '@components/ui/ChapterDivider';

import { useStore } from 'zustand';
import {
  StrategiesPanelProps,
  StrategiesProps,
  StrategyProp,
  StrategyOptionProps,
} from '@components/DesignPanel/types';

export const StrategiesPanel: React.FC<StrategiesPanelProps> = ({}) => {
  const store = useContext(DesignContext);
  const { currentStrategies = [], setCurrentStrategies } = useStore(store);

  const options = [
    {
      label: 'children',
      id: 'children',
      icon: TextAlignBottomIcon,
    },
    {
      label: 'important',
      id: 'important',
      icon: ExclamationTriangleIcon,
    },
  ] as StrategyOptionProps[];

  const handleToggle = (id: StrategyProp) => {
    const newStrategies = currentStrategies.includes(id)
      ? currentStrategies.filter((strategy: StrategyProp) => strategy !== id)
      : ([...currentStrategies, id] as StrategiesProps);
    setCurrentStrategies(newStrategies);
  };

  return (
    <div className="mt-4 flex flex-wrap gap-1">
      <ChapterDivider title="Strategy"></ChapterDivider>
      {options.map((option: any) => {
        let isPressed = 'off';
        if (isEmpty(currentStrategies)) {
          isPressed = currentStrategies.includes(option.id) ? 'on' : 'off';
        }

        return (
          <ButtonToggle
            key={option.id}
            value={isPressed ? 'on' : 'off'}
            defaultPressed={isPressed}
            size="small"
            display="icon"
            label={option.label}
            icon={option.icon}
            onPressedChange={() => handleToggle(option.id)}
          >
            {option.label}
          </ButtonToggle>
        );
      })}
    </div>
  );
};

export default StrategiesPanel;