import { __ } from '@wordpress/i18n';
import { mapOptions } from '@tailwind/helpers';
import { spanSpacing } from 'blockbite-tailwind';

import WidthIcon from 'blockbite-icons/dist/Width';
import HeightIcon from 'blockbite-icons/dist/Height';
import MinSizeIcon from 'blockbite-icons/dist/MinSize';
import MaxSizeIcon from 'blockbite-icons/dist/MaxSize';
import SizeIcon from 'blockbite-icons/dist/Size';

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

const aspectratioUnits = [
  'auto',
  'video',
  'square',
  'b_landscape',
  'b_portrait',
];
const containerValues = [
  'container',
  'b_container-fluid',
  'b_container-fluid-aside-l',
  'b_container-fluid-aside-r',
  'b_container-fluid-half-l',
  'b_container-fluid-half-r',
];

const dimensionModifiers = [
  { id: 'width', label: 'Width', selector: 'w-', icon: WidthIcon },
  { id: 'minwidth', label: 'Min Width', selector: 'min-w-', icon: MinSizeIcon },
  { id: 'maxwidth', label: 'Max Width', selector: 'max-w-', icon: MaxSizeIcon },
  { id: 'height', label: 'Height', selector: 'h-', icon: HeightIcon },
  {
    id: 'minheight',
    label: 'Min Height',
    selector: 'min-h-',
    icon: MinSizeIcon,
  },
  {
    id: 'maxheight',
    label: 'Max Height',
    selector: 'max-h-',
    icon: MaxSizeIcon,
  },
];

export const dimensions = {
  id: 'dimensions',
  icon: WidthIcon,
  label: __('Dimensions', 'blockbite'),
  helper: __('Create space within the item', 'blockbite'),
  dynamicControl: 'Dimension',
  modifiers: dimensionModifiers.map(({ id, label, selector, icon }) =>
    dimensionOptions(id, label, selector, icon)
  ),
};

export const container = {
  id: 'container',
  label: __('Container', 'blockbite'),
  helper: __(
    'Use this element as a centered container with a max width',
    'blockbite'
  ),

  modifiers: [
    {
      id: 'container',
      label: __('Container Width', 'blockbite'),
      selector: null as string | null,
      icon: WidthIcon,
      options: mapOptions([...containerValues]),
      dynamicControl: 'SelectControl',
    },
  ],
};

export const aspectratio = {
  id: 'aspectratio',
  icon: null as any,
  label: __('Aspect Ratio', 'blockbite'),
  helper: __(
    'Set an aspect ratio (proportional width and height) to an item',
    'blockbite'
  ),
  modifiers: [
    {
      id: 'aspectratio',
      label: __('Aspect Ratio', 'blockbite'),
      selector: 'aspect-',
      icon: null as any,
      options: mapOptions([...aspectratioUnits]),
      className: 'icon',
    },
  ],
};

export const gridspan = {
  id: 'gridspan',
  icon: null as any,
  label: __('Grid Span', 'blockbite'),
  helper: __(
    'Span the item on a grid, if if the parent item is a grid',
    'blockbite'
  ),
  modifiers: [
    {
      id: 'gridspan',
      label: __('Horizontal Span', 'blockbite'),
      selector: 'col-span-',
      icon: WidthIcon,
      dynamicControl: 'ButtonGroupRange',
      options: [...mapOptions(spanSpacing())],
      className: 'icon',
    },
  ],
};

export const dimensionPanel = {
  id: 'dimensions',
  label: 'Dimensions',
  icon: SizeIcon,
  expand: true,
  controls: [dimensions, container, aspectratio, gridspan],
};

export default {
  dimensionPanel,
  dimensions,
  container,
  aspectratio,
  gridspan,
};