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

import ArrowLeft from 'blockbite-icons/dist/ArrowLeft';
import ArrowRight from 'blockbite-icons/dist/ArrowRight';
import ArrowUp from 'blockbite-icons/dist/ArrowUp';
import ArrowDown from 'blockbite-icons/dist/ArrowDown';
import MoveIcon from 'blockbite-icons/dist/Move';
import WidthIcon from 'blockbite-icons/dist/Width';
import HeightIcon from 'blockbite-icons/dist/Height';
// Rotate Counter-Clockwise
import RotateLeft from 'blockbite-icons/dist/RotateCounterClockwise';
import GridIcon from 'blockbite-icons/dist/Grid';
import DividerHorizontalIcon from 'blockbite-icons/dist/DividerHorizontal';
import DividerVerticalIcon from 'blockbite-icons/dist/DividerVertical';

import { alignself } from './flexgridalignment';

const rotateUnits = [0, 12, 45, 90, 180];
const scaleUnits = [0, 50, 75, 90, 95, 100, 110, 125, 150];
const colstartUnits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const areaUnits = Array.from({ length: 97 }, (_, i) => i);

let anchorPositionUnits = [
  { label: 'Top Center', id: 'anchor-top-center' },
  { label: 'Top Left', id: 'anchor-top-left' },
  { label: 'Top Right', id: 'anchor-top-right' },
  { label: 'Center Center', id: 'anchor-center-center' },
  { label: 'Center Left', id: 'anchor-center-left' },
  { label: 'Center Right', id: 'anchor-center-right' },
  { label: 'Bottom Center', id: 'anchor-bottom-center' },
  { label: 'Bottom Left', id: 'anchor-bottom-left' },
  { label: 'Bottom Right', id: 'anchor-bottom-right' },
];

export const rotate = {
  id: 'rotate',
  label: __('Rotate', 'blockbite'),
  helper: __('Rotate an item', 'blockbite'),
  display: 'icon',
  modifiers: [
    {
      id: 'rl',
      label: __('Rotate Left', 'blockbite'),
      selector: '-rotate-',
      icon: RotateLeft,
      options: [...mapOptions(rotateUnits)],
      className: 'icon',
    },
    {
      id: 'rr',
      label: __('Rotate Right', 'blockbite'),
      selector: 'rotate-',
      icon: RotateLeft,
      options: [...mapOptions(rotateUnits)],
      className: 'icon',
    },
  ],
};

export const transform = {
  id: 'transform',
  label: __('Position (xy)', 'blockbite'),
  helper: __('Create space within the item', 'blockbite'),
  dynamicControl: 'Spacing',
  modifiers: [
    {
      id: 'tl',
      label: __('Left', 'blockbite'),
      selector: '-translate-x-',
      icon: ArrowLeft,
      codex: 'spacing',
      className: 'icon',
    },
    {
      id: 'tr',
      label: __('Right', 'blockbite'),
      selector: 'translate-x-',
      icon: ArrowRight,
      codex: 'spacing',
      className: 'icon',
    },
    {
      id: 'tt',
      label: __('Top', 'blockbite'),
      selector: '-translate-y-',
      icon: ArrowUp,
      codex: 'spacing',
      className: 'icon',
    },
    {
      id: 'tb',
      label: __('Bottom', 'blockbite'),
      selector: 'translate-y-',
      icon: ArrowDown,
      codex: 'spacing',
      className: 'icon',
    },
  ],
};

export const gridspan = {
  id: 'gridspan',
  label: __('Position Grid (x,y)', 'blockbite'),
  helper: __('Only for items in grid', 'blockbite'),
  modifiers: [
    {
      id: 'colstart',
      label: __('Left', 'blockbite'),
      selector: 'col-start-',
      icon: DividerHorizontalIcon,
      options: [...mapOptions(colstartUnits)],
      className: 'icon',
    },
    {
      id: 'rowstart',
      label: __('Top', 'blockbite'),
      selector: 'row-start-',
      icon: DividerVerticalIcon,
      options: [...mapOptions(colstartUnits)],
      className: 'icon',
    },
  ],
};

// let transformSizeScale = [0, 50, 75, 90, 95, 100, 110, 125, 150]

export const scale = {
  id: 'scale',
  label: __('Scale', 'blockbite'),
  helper: __('Scale an item', 'blockbite'),
  optionClass: 'grid',
  supports: { hover: true, children: true },
  modifiers: [
    {
      id: 'scale',
      label: __('Scale', 'blockbite'),
      selector: 'scale-',
      icon: MoveIcon,
      options: [...mapOptions(scaleUnits)],
      className: 'icon',
    },
    {
      id: 'scalex',
      label: __('Scale X', 'blockbite'),
      selector: 'scale-x-',
      icon: WidthIcon,
      options: [...mapOptions(scaleUnits)],
      className: 'icon',
    },
    {
      id: 'scaley',
      label: __('Scale Y', 'blockbite'),
      selector: 'scale-y-',
      icon: HeightIcon,
      options: [...mapOptions(scaleUnits)],
      className: 'icon',
    },
  ],
};

export const topleft = {
  id: 'postopleft',
  label: __('Top & Left (absolute)', 'blockbite'),
  helper: __('Move absolute positioned items', 'blockbite'),
  dynamicControl: 'Spacing',
  modifiers: [
    {
      id: 'posl',
      label: __('Left', 'blockbite'),
      selector: 'left-',
      icon: ArrowLeft,
      codex: 'spacing',
      className: 'icon',
    },
    {
      id: 'posr',
      label: __('Right', 'blockbite'),
      selector: 'right-',
      icon: ArrowRight,
      codex: 'spacing',
      className: 'icon',
    },
    {
      id: 'post',
      label: __('Top', 'blockbite'),
      selector: 'top-',
      icon: ArrowUp,
      codex: 'spacing',
      className: 'icon',
    },
    {
      id: 'posb',
      label: __('Bottom', 'blockbite'),
      selector: 'bottom-',
      icon: ArrowDown,
      codex: 'spacing',
      className: 'icon',
    },
    {
      id: 'minposl',
      label: __('Min Left', 'blockbite'),
      selector: '-left-',
      icon: ArrowLeft,
      codex: 'spacing',
      className: 'icon',
    },
    {
      id: 'minposr',
      label: __('Min Right', 'blockbite'),
      selector: '-right-',
      icon: ArrowRight,
      codex: 'spacing',
      className: 'icon',
    },
    {
      id: 'minpost',
      label: __('Min Top', 'blockbite'),
      selector: '-top',
      icon: ArrowUp,
      codex: 'spacing',
      className: 'icon',
    },
    {
      id: 'minposb',
      label: __('Min Bottom', 'blockbite'),
      selector: '-bottom-',
      icon: ArrowDown,
      codex: 'spacing',
      className: 'icon',
    },
  ],
};

// should we hide this?
export const area = {
  id: 'b_area_x_y',
  label: __('Area (xy)', 'blockbite'),
  helper: __('Create space within the item', 'blockbite'),
  supports: { hover: true, children: true },
  modifiers: [
    {
      id: 'b_area',
      label: __('Init', 'blockbite'),
      selector: null,
      icon: GridIcon,
      codex: 'spacing-area',
      options: [{ value: 'b_area', label: 'b_area' }],
      className: 'icon',
    },
    {
      id: 'b_area-x',
      label: __('Left', 'blockbite'),
      selector: 'b_area-x-',
      icon: ArrowLeft,
      codex: 'spacing-area',
      options: [...mapOptions(areaUnits)],
      className: 'icon',
    },
    {
      id: 'b_area-y',
      label: __('Top', 'blockbite'),
      selector: 'b_area-y-',
      icon: DividerVerticalIcon,
      codex: 'spacing-area',
      options: [...mapOptions(areaUnits)],
      className: 'icon',
    },
    {
      id: 'b_area-w',
      label: __('Width', 'blockbite'),
      selector: 'b_area-w-',
      icon: WidthIcon,
      codex: 'spacing-area',
      options: [...mapOptions(areaUnits)],
      className: 'icon',
    },
    {
      id: 'b_area-h',
      label: __('Height', 'blockbite'),
      selector: 'b_area-h-',
      icon: HeightIcon,
      codex: 'spacing-area',
      options: [...mapOptions(areaUnits)],
      className: 'icon',
    },
  ],
};

export const anchorposition = {
  id: 'anchorposition',
  label: __('Anchor Position', 'blockbite'),
  helper: __('Anchor position', 'blockbite'),
  modifiers: [
    {
      id: 'anchorposition',
      label: __('Anchor Position', 'blockbite'),
      options: [...mapOptions(anchorPositionUnits)],
      className: 'icon',
    },
  ],
};

export const transformPanel = {
  id: 'transform',
  label: 'Transform & Position',
  icon: MoveIcon,
  controls: [
    rotate,
    transform,
    gridspan,
    alignself,
    scale,
    area,
    topleft,
    anchorposition,
  ],
};

export default { transformPanel, rotate, transform, scale, gridspan };