import { __ } from '@wordpress/i18n';
import { mapOptions } from '@tailwind/helpers';
import LayersIcon from 'blockbite-icons/dist/Layers';
import ListBullet from 'blockbite-icons/dist/ListBullet';

const orderUnits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const zindexUnits = [0, 10, 20, 30, 40, 60, 'auto'];

export const order = {
  id: 'order',
  label: __('Order', 'blockbite'),
  helper: __('Order item', 'blockbite'),
  icon: ListBullet,
  modifiers: [
    {
      id: 'order',
      label: __('Order', 'blockbite'),
      selector: 'order-',
      options: [...mapOptions(orderUnits)],
    },
  ],
};

export const zindex = {
  id: 'zindex',
  label: __('Depth', 'blockbite'),
  helper: __('Z-index item', 'blockbite'),
  icon: LayersIcon,
  modifiers: [
    {
      id: 'zindex',
      label: __('Depth', 'blockbite'),
      selector: 'z-',
      options: [...mapOptions(zindexUnits)],
    },
  ],
};

export const depthorderPanel = {
  id: 'depthorder',
  label: __('Depth & Order', 'blockbite'),
  icon: LayersIcon,
  controls: [order, zindex],
};

export default { depthorderPanel, zindex, order };