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

import { ButtonToggleGroup } from '@components/ui/ButtonToggle';

import { __ } from '@wordpress/i18n';
import ButtonGroupControl from '@components/DesignPanel/DynamicControls/ButtonGroup';
import { useActiveOptionValue } from '@components/DesignPanel/hooks/useActiveOptionvalue';
import { useStore } from 'zustand';
import { DesignContext } from '@components/DesignPanel/DesignStore';
import { ModifierPanelProps } from '@components/DesignPanel/types';
import { ChapterDivider } from '@components/ui/ChapterDivider';

export const ModifierDefault: React.FC<ModifierPanelProps> = ({
  currentControlId,
  currentControlLabel,
  modifiers,
  emitOptions,
}) => {
  const store = useStore(useContext(DesignContext));

  // set the current modifier
  const [currentModifier, setCurrentModifier] = useState<any>();

  // set first modifier
  useEffect(() => {
    if (modifiers.length > 0) {
      setCurrentModifier({
        ...modifiers[0],
      });
    }
  }, [modifiers]);

  /*
    Handles the dynamic import of the modifier control
  */
  const DynamicComponent = useMemo(() => {
    return currentModifier?.dynamicControl
      ? lazy(
          () =>
            import(
              `@components/DesignPanel/DynamicControls/${currentModifier.dynamicControl}`
            )
        )
      : ButtonGroupControl;
  }, [currentModifier?.dynamicControl]);

  // get a single active option value
  const activeOptionValue = useActiveOptionValue(currentModifier?.id, store);

  return (
    <div key={currentControlId} data-id="blockbite-defaultModifier">
      {/* Create a button group with the modifiers */}
      <div>
        <ChapterDivider title={currentControlLabel} />
        {modifiers.length > 1 && (
          <ButtonToggleGroup
            defaultPressed={currentModifier?.id}
            onPressedChange={(value) => {
              if (value !== '') {
                const selectedModifier = modifiers.find(
                  (modifier) => modifier.id === value
                );
                if (selectedModifier) {
                  setCurrentModifier(selectedModifier);
                }
              }
            }}
            display="icon"
            size="small"
            tabs={modifiers.length < 4}
            options={modifiers.map((modifier) => ({
              label: modifier.label,
              value: modifier.id,
              icon: modifier?.icon,
            }))}
            className="mb-4"
          ></ButtonToggleGroup>
        )}
      </div>
      {/* Render the current modifier */}
      {currentModifier?.id !== undefined && (
        <div>
          <Suspense fallback={<div className="block min-h-[170px]"></div>}>
            <DynamicComponent
              activeOptionValue={activeOptionValue}
              options={currentModifier?.options}
              codex={currentModifier?.codex}
              emitOptions={emitOptions}
              modifierId={currentModifier?.id}
              display={currentModifier?.display}
            />
          </Suspense>
        </div>
      )}
    </div>
  );
};

export default ModifierDefault;