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

const liststyleOptions = ['none', 'disc', 'decimal'];
const liststylePositionOptions = ['inside', 'outside'];

const liststyle = {
  id: 'liststyle',
  label: __('List Style', 'blockbite'),
  helper: __('List Style', 'blockbite'),
  modifiers: [
    {
      id: 'liststyle',
      label: __('List Style', 'blockbite'),
      selector: 'list-',
      options: [...mapOptions(liststyleOptions)],
      className: 'icon',
    },
  ],
};

// lust style position
const liststylePosition = {
  id: 'liststylePosition',
  label: __('List Style Position', 'blockbite'),
  helper: __('List Style Position', 'blockbite'),
  modifiers: [
    {
      id: 'liststylePosition',
      label: __('List Style Position', 'blockbite'),
      selector: 'list-',
      options: [...mapOptions(liststylePositionOptions)],
      className: 'icon',
      hover: true,
    },
  ],
};

// list style image
const liststyleImage = {
  id: 'liststyleImage',
  label: __('List Style Image', 'blockbite'),
  helper: __('List Style Image', 'blockbite'),
  modifiers: [
    {
      id: 'liststyleImage',
      label: __('List Style Image', 'blockbite'),
      selector: 'list-image-',
      options: [
        {
          id: 'liststyleimagenone',
          value: 'none',
          label: __('None', 'blockbite'),
          type: 'button',
        },
        {
          id: 'liststyleimage',
          value: '',
          label: __('URL', 'blockbite'),
          type: 'urlinput',
        },
      ],
      className: 'icon',
      hover: true,
    },
  ],
};

const listcolor = {
  id: 'listcolor',
  label: __('List color', 'blockbite'),
  helper: __('List', 'blockbite'),
  dynamicControl: 'ThemeOrNative',
  modifiers: [
    {
      id: 'listcolor',
      label: __('List Color', 'blockbite'),
      selector: 'marker:text-',
      codex: 'themeProvider.colors|units.colors',
      dynamicControl: 'ColorSwatch|ColorDropdown',
    },
  ],
};

export const liststylePanel = {
  id: 'liststyle',
  label: __('List Style', 'blockbite'),
  supports: { hover: false },
  controls: [liststyle, liststylePosition, liststyleImage, listcolor],
};

export default { liststylePanel };