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

const positionUnits = ['fixed', 'absolute', 'relative', 'sticky top-0'];

let overflowUnits = [
  { label: 'Clip', id: 'clip' },
  { label: 'Hidden', id: 'hidden' },
  { label: 'Visible', id: 'visible' },
  { label: 'Hide X', id: 'x-hidden' },
  { label: 'Hide Y', id: 'y-hidden' },
  { label: 'Scroll X', id: 'x-scroll' },
  { label: 'Scroll Y', id: 'y-scroll' },
];

let groupUnits = [{ label: 'Group', id: 'group' }];

export const position = {
  id: 'position',
  label: __('Position', 'blockbite'),
  helper: __('Position item', 'blockbite'),
  optionClass: '',
  supports: { hover: false },
  modifiers: [
    {
      id: 'position',
      label: __('Position', 'blockbite'),
      selector: false,
      options: [...mapOptions(positionUnits)],
      className: 'icon',
    },
  ],
};

export const overflow = {
  id: 'overflow',
  label: __('Overflow', 'blockbite'),
  helper: __('Overflow item', 'blockbite'),
  optionClass: '',
  supports: { hover: false },
  modifiers: [
    {
      id: 'overflow',
      label: __('Overflow', 'blockbite'),
      selector: 'overflow-',
      options: [...mapOptions(overflowUnits)],
      className: 'icon',
    },
  ],
};

export const group = {
  id: 'group',
  label: __('Group', 'blockbite'),
  helper: __('Group', 'blockbite'),
  optionClass: '',
  supports: { hover: false },
  modifiers: [
    {
      id: 'group',
      label: __('group', 'blockbite'),
      options: [...mapOptions(groupUnits)],
      className: 'icon',
    },
  ],
};

export const advancedstylePanel = {
  id: 'advancedstyle',
  label: __('Advanced Styles', 'blockbite'),
  controls: [position, group, overflow],
};

export default {
  advancedstylePanel,
  overflowUnits,
  position,
  overflow,
};