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

import AlignTopIcon from 'blockbite-icons/dist/AlignTop';
import AlignCenterVerticallyIcon from 'blockbite-icons/dist/AlignCenterVertically';
import AlignBottomIcon from 'blockbite-icons/dist/AlignBottom';
import StretchVerticallyIcon from 'blockbite-icons/dist/StretchVertically';
import AlignLeftIcon from 'blockbite-icons/dist/AlignLeft';
import AlignCenterHorizontallyIcon from 'blockbite-icons/dist/AlignCenterHorizontally';
import AlignRightIcon from 'blockbite-icons/dist/AlignRight';
import StretchHorizontallyIcon from 'blockbite-icons/dist/StretchHorizontally';
import SpaceBetweenHorizontallyIcon from 'blockbite-icons/dist/SpaceBetweenHorizontally';
import SpaceEvenlyHorizontallyIcon from 'blockbite-icons/dist/SpaceEvenlyHorizontally';
import SpaceEvenlyVerticallyIcon from 'blockbite-icons/dist/SpaceEvenlyVertically';

const alignUnits = ['start', 'end', 'center', 'between', 'stretch', 'baseline'];

const flexalignXValues = [
  { label: __('Start', 'blockbite'), id: 'start', icon: AlignLeftIcon },
  {
    label: __('Center', 'blockbite'),
    id: 'center',
    icon: AlignCenterHorizontallyIcon,
  },
  { label: __('End', 'blockbite'), id: 'end', icon: AlignRightIcon },
  {
    label: __('Between', 'blockbite'),
    id: 'between',
    icon: SpaceBetweenHorizontallyIcon,
  },
  {
    label: __('Stretch', 'blockbite'),
    id: 'stretch',
    icon: StretchHorizontallyIcon,
  },
  {
    label: __('Space Evenly', 'blockbite'),
    id: 'evenly',
    icon: SpaceEvenlyHorizontallyIcon,
  },
];

const flexalignYValues = [
  { label: __('Start', 'blockbite'), id: 'start', icon: AlignTopIcon },
  {
    label: __('Center', 'blockbite'),
    id: 'center',
    icon: AlignCenterVerticallyIcon,
  },
  { label: __('End', 'blockbite'), id: 'end', icon: AlignBottomIcon },
  {
    label: __('Stretch', 'blockbite'),
    id: 'stretch',
    icon: StretchVerticallyIcon,
  },
  {
    label: __('Space Baseline', 'blockbite'),
    id: 'baseline',
    icon: SpaceEvenlyVerticallyIcon,
  },
];

export const flexalign = {
  id: 'flexalign',
  label: __('Alignment', 'blockbite'),
  helper: __('Alignment of flexbox', 'blockbite'),
  dynamicControl: 'LayoutAlign',
  hideChapter: true,
  modifiers: [
    {
      id: 'flexalignjustify',
      label: __('Horizontal', 'blockbite'),
      selector: 'justify-',
      options: mapOptions([...flexalignXValues]),
    },
    {
      id: 'flexalignitems',
      label: __('Vertical', 'blockbite'),
      selector: 'items-',
      options: mapOptions([...flexalignYValues]),
    },
  ],
};

export const gridalign = {
  id: 'gridalign',
  label: __('Alignment', 'blockbite'),
  helper: __('Alignment of grid', 'blockbite'),
  optionClass: '',
  dynamicControl: 'LayoutAlign',
  hideChapter: true,
  modifiers: [
    {
      id: 'gridjustifyitems',
      label: __('Horizontal', 'blockbite'),
      selector: 'justify-items-',
      options: mapOptions([...flexalignXValues]),
    },
    {
      id: 'gridalignitems',
      label: __('Vertical', 'blockbite'),
      selector: 'items-',
      options: mapOptions([...flexalignYValues]),
    },
  ],
};

export const alignself = {
  id: 'alignself',
  label: __('Alignment', 'blockbite'),
  helper: __('Align item', 'blockbite'),
  modifiers: [
    {
      id: 'alignself',
      label: __('Auto', 'blockbite'),
      selector: 'self-',
      options: [...mapOptions(alignUnits)],
    },
  ],
};

export default { flexalign, gridalign, alignself };