import { advancedstylePanel } from '@tailwind/advancedstyle';
import { depthorderPanel } from '@tailwind/depthorder';
import { appearancePanel } from '@tailwind/appearance';
import { borderPanel, dividerPanel } from '@tailwind/border';
import { colorPanel } from '@tailwind/color';
import { dimensionPanel } from '@tailwind/dimension';
import { flexgridPanel } from '@tailwind/flexgrid';
import { liststylePanel } from '@tailwind/list';
import { mediaPanel } from '@tailwind/media';
import { spacingPanel } from '@tailwind/spacing';
import { transformPanel } from '@tailwind/transform';
import { typographyPanel } from '@tailwind/typography';
import { transitionPanel, motionEffectsPanel } from '@tailwind/motion';

// spacing units
import {
  clampSpacing,
  gridSpacing,
  nativeSpacing,
  percentSpacing,
  screenSpacing,
  getColorObject,
} from 'blockbite-tailwind';

export const getModifiers = () => {
  // Get all controls from all panels
  const controls = [
    advancedstylePanel,
    depthorderPanel,
    appearancePanel,
    borderPanel,
    dividerPanel,
    colorPanel,
    dimensionPanel,
    flexgridPanel,
    liststylePanel,
    spacingPanel,
    transformPanel,
    mediaPanel,
    typographyPanel,
    transitionPanel,
    motionEffectsPanel,
  ];

  const allControls = [] as any;
  const allControlsWithModifiers = {} as any;

  controls.forEach((panel) => {
    allControls.push(...panel.controls);
  });

  allControls.forEach((control: any) => {
    delete control.icon;
    delete control.className;
    //
    allControlsWithModifiers[control.id] = control.modifiers.map(
      (modifier: any) => {
        return modifier.id;
      }
    );
  });

  const allModifiers = [] as any;
  const codexUnits = {
    colors: getColorObject(),
    spacing: [] as any,
    spacingArea: [] as any,
  };

  allControls.forEach((control: any) => {
    allModifiers.push(...control.modifiers);
  });

  allModifiers.forEach((modifier: any) => {
    delete modifier.icon;
    delete modifier.className;
    delete modifier.optionHooks;
    delete modifier.relatedValues;

    // delete icon from options
    if (modifier.options !== undefined) {
      if (Array.isArray(modifier.options)) {
        modifier.options.forEach((option: any) => {
          delete option.icon;
        });
      }
    }
    if (modifier.codex !== undefined) {
      modifier.options = 'codex';
    }
  });

  /*
    Add general bites modifier
    Allow detecting bite utility classes in the design editor
  */
  const bites = [
    {
      id: 'bites',
      label: 'Bite',
      selector: null,
      options: [],
    },
  ];

  allModifiers.push(...bites);

  const spacingUnits = {
    native: nativeSpacing(),
    percent: percentSpacing(),
    screen: screenSpacing(),
    clamp: clampSpacing('b_'),
    grid: gridSpacing('b_'),
  };

  return {
    controls: allControlsWithModifiers,
    modifiers: allModifiers,
    units: {
      ...codexUnits,
      spacing: spacingUnits,
    },
  };
};

export default { getModifiers };