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

import { zindex } from '@tailwind/depthorder';
import { flexalign } from '@tailwind/flexgridalignment';
import { mapOptions } from '@tailwind/helpers';

import { spanSpacing } from 'blockbite-tailwind';

import LayoutIcon from 'blockbite-icons/dist/Layout';

import ColumnsIcon from 'blockbite-icons/dist/Columns';
import RowsIcon from 'blockbite-icons/dist/Rows';
import ColumnsReverseIcon from 'blockbite-icons/dist/ColumnsReverse';
import RowsReverseIcon from 'blockbite-icons/dist/RowsReverse';
import WrapIcon from 'blockbite-icons/dist/wrap';
import GridIcon from 'blockbite-icons/dist/Grid';

const areagridValues = [
  { label: '16', id: '16' },
  { label: '32', id: '32' },
  { label: '64', id: '64' },
  { label: '96', id: '96' },
];

const flexgridValues = [
  {
    label: __('Flex', 'blockbite'),
    id: 'flex',
  },
  {
    label: __('Grid', 'blockbite'),
    id: 'grid',
  },
  { label: __('Block', 'blockbite'), id: 'block' },
  { label: __('Hidden', 'blockbite'), id: 'hidden' },
  { label: __('Inline', 'blockbite'), id: 'inline' },
  { label: __('Inline Block', 'blockbite'), id: 'inline-block' },
  { label: __('Inline Flex', 'blockbite'), id: 'inline-flex' },
];

/*
const heightValues = [
  { label: '100%', id: 'h-full' },
  { label: 'Auto', id: 'h-auto' },
  { label: 'min 640px height', id: 'min-h-[640px]' },
];
*/

const widthValues = [
  { label: '100%', id: 'w-full' },
  { label: 'Container', id: 'container' },
  { label: 'Container Fluid', id: 'b_container-fluid' },
  { label: 'Max 960px Wide', id: 'max-w-b_960 mx-auto' },
  { label: 'Max 800px Wide', id: 'max-w-b_800 mx-auto' },
  { label: 'Max 720px Wide', id: 'max-w-b_720 mx-auto' },
  { label: 'Max 640px Wide', id: 'max-w-b_640 mx-auto' },
  { label: 'Grid container', id: 'b_grid-container' },
  { label: 'Grid container half right', id: 'b_grid-container-right' },
  { label: 'Grid container half left', id: 'b_grid-container-left' },
];

const flexdirectionValues = [
  { label: __('Row', 'blockbite'), id: 'row', icon: ColumnsIcon },

  {
    label: __('Row Reverse', 'blockbite'),
    id: 'row-reverse',
    icon: ColumnsReverseIcon,
  },
  { label: __('Column', 'blockbite'), id: 'col', icon: RowsIcon },
  {
    label: __('Column Reverse', 'blockbite'),
    id: 'col-reverse',
    icon: RowsReverseIcon,
  },
  {
    label: __('Column Reverse', 'blockbite'),
    id: 'col-reverse',
    icon: RowsReverseIcon,
  },
  { label: __('Wrap', 'blockbite'), id: 'wrap', icon: WrapIcon },
];

const positionValues = [
  { label: 'Relative', id: 'relative' },
  { label: 'Absolute', id: 'absolute' },
  { label: 'Fixed', id: 'fixed' },
  { label: 'Sticky', id: 'sticky top-0' },
];

// const shrinkUnits = [0, 1];

// const flexUnits = ['1', 'auto', 'initial', 'none'];

const flexdirection = {
  id: 'flexdirection',
  label: __('Colum & Row', 'blockbite'),
  helper: __('Flex orientation', 'blockbite'),
  dynamicControl: 'LayoutDirection',
  conditional: { id: 'flextype', value: 'flex' },
  modifiers: [
    {
      id: 'flexdirection',
      label: __('Flex direction', 'blockbite'),
      selector: 'flex-',
      options: mapOptions([...flexdirectionValues]),
    },
  ],
};

const gridcolsrows = {
  id: 'gridcolsrows',
  label: __('Grid Columns & Rows', 'blockbite'),
  helper: __('Divide your grid in columns and rows', 'blockbite'),
  conditional: { id: 'flextype', value: 'grid' },
  modifiers: [
    {
      id: 'gridcols',
      label: __('Grid Columns', 'blockbite'),
      selector: 'grid-cols-',
      options: [...mapOptions([...spanSpacing()])],
      dynamicControl: 'ButtonGroupRange',
      icon: ColumnsIcon,
    },
    {
      id: 'gridrows',
      label: __('Grid Rows', 'blockbite'),
      selector: 'grid-rows-',
      options: [...mapOptions([...spanSpacing()])],
      dynamicControl: 'ButtonGroupRange',
      icon: RowsIcon,
    },
    {
      id: 'gridarea',
      label: __('Area Columns', 'blockbite'),
      selector: 'b_grid-area-',
      options: [...mapOptions([...areagridValues])],
      icon: GridIcon,
    },
  ],
};

const flextype = {
  id: 'flextype',
  icon: LayoutIcon,
  label: __('Layout', 'blockbite'),
  helper: __('Choose the flex type', 'blockbite'),
  dynamicControl: 'Layout',
  modifiers: [
    {
      id: 'flextype',
      label: __('Flex Type', 'blockbite'),
      options: [...mapOptions([...flexgridValues])],
    },
  ],
};

const area = {
  id: 'area',
  label: __('Area', 'blockbite'),
  helper: __('Area canvas', 'blockbite'),
  optionClass: '',
  supports: { hover: false },
  modifiers: [
    {
      id: 'flextype',
      label: __('Grid Area', 'blockbite'),
      options: mapOptions([...areagridValues]),
      codex: 'spacing-area',
    },
  ],
};

const flexgriddimensions = {
  id: 'flexgriddimensions',
  label: __('Dimensions', 'blockbite'),
  helper: __('Set the dimensions of the flexbox', 'blockbite'),
  modifiers: [
    {
      id: 'flexwidth',
      label: __('Width', 'blockbite'),
      selector: '',
      options: mapOptions([...widthValues]),
      dynamicControl: 'SelectControl',
    },
    {
      id: 'flexheight',
      label: __('Min Height', 'blockbite'),
      selector: 'min-h-',
      codex: 'units.spacing',
      dynamicControl: 'MetricsControl',
    },
  ],
};

const flexgridgap = {
  id: 'flexgridgap',
  label: __('Gap', 'blockbite'),
  helper: __('Set the gap between the grid items', 'blockbite'),
  modifiers: [
    {
      id: 'flexgapa',
      label: __('Gap Around', 'blockbite'),
      selector: 'gap-',
      codex: 'units.spacing',
      dynamicControl: 'MetricsControl',
    },
    {
      id: 'flexgapx',
      label: __('Gap X', 'blockbite'),
      selector: 'gap-x-',
      codex: 'units.spacing',
      dynamicControl: 'MetricsControl',
    },
    {
      id: 'flexgapy',
      label: __('Gap Y', 'blockbite'),
      selector: 'gap-y-',
      codex: 'units.spacing',
      dynamicControl: 'MetricsControl',
    },
  ],
};

const flexgridposition = {
  id: 'flexgridposition',
  label: __('Position', 'blockbite'),
  helper: __('Set the position of the flexbox', 'blockbite'),
  optionClass: '',
  supports: { hover: false },
  modifiers: [
    {
      id: 'flexposition',
      label: __('Position', 'blockbite'),
      selector: '',
      options: mapOptions([...positionValues]),
      className: '',
    },
  ],
};

/*
const shrink = {
  id: 'shrink',
  label: __('Shrink', 'blockbite'),
  helper: __('Shrink item or not', 'blockbite'),
  optionClass: '',
  supports: { hover: false },
  modifiers: [
    {
      id: 'shrink',
      label: __('Shrink', 'blockbite'),
      selector: 'shrink-',
      options: [...mapOptions(shrinkUnits)],
      className: 'icon',
    },
  ],
};
*/

export const flexgridPanel = {
  id: 'flexpanel',
  label: __('Layout', 'blockbite'),
  expand: true,
  controls: [
    flextype,
    flexdirection,
    flexalign,
    gridcolsrows,
    flexgridgap,
    flexgriddimensions,
    flexgridposition,
    zindex,
  ],
};

//shrink, flex,

// only areay
export const areaPanel = {
  id: 'flexpanel',
  expand: true,
  label: __('Layout', 'blockbite'),
  controls: [area, flexdirection, flexgridgap, flexgriddimensions, zindex],
};

export default { flexgridPanel, areaPanel };