import { useEffect, useState } from '@wordpress/element';
import { getDesignOption } from '@components/DesignPanel/Helpers';
import { BiteStyleProps } from '@components/DesignPanel/types';

/* 
  single value
  Changes on:
  currentResponsive, currentModifierId, currentStrategies, currentInteraction

  Optional:
  onDesignChange ? currentClass : null
*/
const useActiveOptionValue = (
  currentModifierId: string,
  store: any,
  onDesignChange?: boolean
) => {
  const [activeOptionValue, setActiveOptionValue] = useState<string>('');

  useEffect(() => {
    // Find the first design with a matching modifier
    const matchingDesign = store.currentDesign.find(
      (design: BiteStyleProps) => {
        const { current } = getDesignOption(
          design.value,
          currentModifierId,
          store
        );
        return !!current;
      }
    );

    // If found, set the active option value; otherwise, clear it
    setActiveOptionValue(matchingDesign?.value || '');
  }, [
    store.currentResponsive,
    currentModifierId,
    store.currentStrategies,
    store.currentInteraction,
    onDesignChange ? store.currentClass : null,
  ]);

  return activeOptionValue;
};

const useActiveOptionValues = (currentModifiers: string[], store: any) => {
  const [activeOptionValues, setActiveOptionValues] = useState<any[]>([]);

  useEffect(() => {
    const activeOptionValues = currentModifiers.map((currentModifierId) => {
      const matchingDesign = store.currentDesign.find(
        (design: BiteStyleProps) => {
          const { current } = getDesignOption(
            design.value,
            currentModifierId,
            store
          );
          return !!current;
        }
      );

      return { id: currentModifierId, value: matchingDesign?.value || '' };
    });

    setActiveOptionValues(activeOptionValues);
  }, [
    store.currentResponsive,
    currentModifiers,
    store.currentStrategies,
    store.currentInteraction,
  ]);

  return activeOptionValues;
};

export { useActiveOptionValue, useActiveOptionValues };