import { __ } from '@wordpress/i18n';

import PaddingIcon from 'blockbite-icons/dist/Padding';
import MarginIcon from 'blockbite-icons/dist/Margin';
import SectionIcon from 'blockbite-icons/dist/Section';
import { TailwindModifierProps } from '@components/DesignPanel/types';

const spacingOptions = ({
  id,
  label,
  selector,
  icon,
}: TailwindModifierProps) => ({
  id,
  label: __(label, 'blockbite'),
  selector,
  icon: icon,
  codex: 'units.spacing',
});

const paddingModifiers: {
  id: string;
  label: string;
  selector: string;
  icon?: any;
}[] = [
  { id: 'pa', label: 'Around', selector: 'p-', icon: null },
  { id: 'pl', label: 'Left', selector: 'pl-', icon: null },
  { id: 'pr', label: 'Right', selector: 'pr-', icon: null },
  { id: 'pt', label: 'Top', selector: 'pt-', icon: null },
  { id: 'pb', label: 'Bottom', selector: 'pb-', icon: null },
  { id: 'px', label: 'Horizontal', selector: 'px-', icon: null },
  { id: 'py', label: 'Vertical', selector: 'py-', icon: null },
];

const marginModifiers: {
  id: string;
  label: string;
  selector: string;
  icon?: any;
}[] = [
  { id: 'ma', label: 'Around', selector: 'm-', icon: null },
  { id: 'ml', label: 'Left', selector: 'ml-', icon: null },
  { id: 'mr', label: 'Right', selector: 'mr-', icon: null },
  { id: 'mt', label: 'Top', selector: 'mt-', icon: null },
  { id: 'mb', label: 'Bottom', selector: 'mb-', icon: null },
  { id: 'mx', label: 'Horizontal', selector: 'mx-', icon: null },
  { id: 'my', label: 'Vertical', selector: 'my-', icon: null },
];

const spacingModifiers = [
  {
    id: 'spacex',
    label: 'Horizontal',
    selector: 'space-x-',
    codex: 'spacing',
    icon: null as any,
  },
  {
    id: 'spacey',
    label: 'Vertical',
    selector: 'space-y-',
    codex: 'spacing',
    icon: null as any,
  },
] as TailwindModifierProps[];

const padding = {
  id: 'padding',
  icon: PaddingIcon,
  label: __('Padding', 'blockbite'),
  helper: __('Create space within the item', 'blockbite'),
  dynamicControl: 'Spacing',
  modifiers: paddingModifiers.map(({ id, label, selector }) =>
    spacingOptions({ id, label, selector })
  ),
};

const margin = {
  id: 'margin',
  icon: MarginIcon,
  label: __('Margin', 'blockbite'),
  helper: __('Create space around the item', 'blockbite'),
  dynamicControl: 'Spacing',
  modifiers: marginModifiers.map(({ id, label, selector }) =>
    spacingOptions({ id, label, selector })
  ),
};

export const spacing = {
  id: 'spacing',
  icon: SectionIcon,
  label: __('Spacing', 'blockbite'),
  helper: __('Create between items', 'blockbite'),
  dynamicControl: 'Spacing',
  modifiers: spacingModifiers.map(({ id, label, selector }) =>
    spacingOptions({ id, label, selector })
  ),
};

export const spacingPanel = {
  id: 'spacing',
  label: 'Spacing',
  icon: PaddingIcon,
  controls: [padding, margin, spacing],
};

export default { spacingPanel, spacing };