import { __ } from '@wordpress/i18n';
import { mapOptions } from '@tailwind/helpers';
import ColorWheelIcon from 'blockbite-icons/dist/ColorWheel';

const opacityGrades = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90];

const Colors = {
  id: 'colors',
  label: __('Colors', 'blockbite'),
  helper: __('Colors', 'blockbite'),
  dynamicControl: 'ThemeOrNative',
  modifiers: [
    {
      id: 'textcolor',
      label: __('Text Color', 'blockbite'),
      selector: 'text-',
      codex: 'themeProvider.colors|units.colors',
      dynamicControl: 'ColorSwatch|ColorDropdown',
      className: 'icon',
    },
    {
      id: 'bgcolor',
      label: __('Background Color', 'blockbite'),
      selector: 'bg-',
      codex: 'themeProvider.colors|units.colors',
      dynamicControl: 'ColorSwatch|ColorDropdown',
      className: 'icon',
    },
  ],
};

const colorOpacity = {
  id: 'coloropacity',
  label: __('Opacity', 'blockbite'),
  helper: __('Theme', 'blockbite'),
  modifiers: [
    {
      id: 'bgopacity',
      label: __('Background Opacity', 'blockbite'),
      selector: 'bg-opacity-',
      options: [...mapOptions(opacityGrades)],
      className: 'icon',
    },

    {
      id: 'textopacity',
      label: __('Text Opacity', 'blockbite'),
      selector: 'text-opacity-',
      options: [...mapOptions(opacityGrades)],
      className: 'icon',
    },
  ],
};

export const colorPanel = {
  id: 'color',
  label: __('Color', 'blockbite'),
  expand: true,
  icon: ColorWheelIcon,
  controls: [Colors, colorOpacity],
};

export default { colorPanel };