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

import BoxIcon from 'blockbite-icons/dist/Box';
import TopLeftIcon from 'blockbite-icons/dist/ArrowTopLeft';
import TopRightIcon from 'blockbite-icons/dist/ArrowTopRight';
import BottomLeftIcon from 'blockbite-icons/dist/ArrowBottomLeft';
import BottomRightIcon from 'blockbite-icons/dist/ArrowBottomRight';
import ShadowIcon from 'blockbite-icons/dist/Shadow';

let roundedScale = ['md', 'lg', 'xl', '2xl', '3xl', 'full'];
let shadowScale = ['sm', 'md', 'lg', 'xl', '2xl', 'inner'];

const unitsRounded = [...mapOptions(roundedScale)];
const unitsShadow = [...mapOptions(shadowScale)];
const visibilityUnits = ['hidden', 'visible'];
const opacityUnits = [
  0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
  100,
];

export const effectFilterValues = [
  { label: 'Sepia', id: 'sepia' },
  { label: 'Grayscale', id: 'grayscale' },
  { label: 'Invert', id: 'invert' },
];

export const blurValues = [
  { label: 'blur small', id: 'blur-sm' },
  { label: 'blur', id: 'blur' },
  { label: 'blur large', id: 'blur-lg' },
  { label: 'blur x large', id: 'blur-xl' },
  { label: 'blur 2x large', id: 'blur-2xl' },
  { label: 'blur 3x large', id: 'blur-3xl' },
];

export const mixblendValues = [
  { label: 'Normal', id: 'normal' },
  { label: 'Multiply', id: 'multiply' },
  { label: 'Screen', id: 'screen' },
  { label: 'Overlay', id: 'overlay' },
  { label: 'Darken', id: 'darken' },
  { label: 'Lighten', id: 'lighten' },
];

export const rounded = {
  id: 'rounded',
  label: __('Rounded', 'blockbite'),
  helper: __('Create a rounded item', 'blockbite'),
  optionClass: '',
  supports: { hover: true, children: true },
  display: 'icon',
  modifiers: [
    {
      id: 'rounda',
      label: __('Around', 'blockbite'),
      selector: 'rounded-',
      icon: BoxIcon,
      options: unitsRounded,
      className: 'icon',
    },
    {
      id: 'roundtl',
      label: __('Top Left', 'blockbite'),
      selector: 'rounded-tl-',
      icon: TopLeftIcon,
      options: unitsRounded,
      className: 'icon',
    },
    {
      id: 'roundtr',
      label: __('Top Right', 'blockbite'),
      selector: 'rounded-tr-',
      icon: TopRightIcon,
      options: unitsRounded,
      className: 'icon',
    },
    {
      id: 'roundbt',
      label: __('Bottom Left', 'blockbite'),
      selector: 'rounded-bl-',
      icon: BottomLeftIcon,
      options: unitsRounded,
      className: 'icon',
    },
    {
      id: 'roundbr',
      label: __('Bottom Right', 'blockbite'),
      selector: 'rounded-br-',
      icon: BottomRightIcon,
      options: unitsRounded,
      className: 'icon',
    },
  ],
};

const shadow = {
  id: 'shadow',
  label: __('Shadow', 'blockbite'),
  helper: __('Create a shadow item', 'blockbite'),
  modifiers: [
    {
      id: 'shadowa',
      label: __('Shadow', 'blockbite'),
      selector: 'drop-shadow-',
      icon: ShadowIcon,
      options: unitsShadow,
    },
  ],
};

const visibility = {
  id: 'visibility',
  label: __('Visibility', 'blockbite'),
  helper: __('Create a visibility item', 'blockbite'),
  modifiers: [
    {
      id: 'visibility',
      label: __('Visibility', 'blockbite'),
      options: [...mapOptions(visibilityUnits)],
      className: 'icon',
    },
  ],
};

export const effectfilters = {
  id: 'effectfilters',
  label: __('Effect Filters', 'blockbite'),
  helper: __('Set the filters', 'blockbite'),
  modifiers: [
    {
      id: 'effectfilters',
      label: __('Effect Filters', 'blockbite'),
      options: [...mapOptions(effectFilterValues)],
      className: '',
    },
  ],
};

export const blurfilters = {
  id: 'blurfilters',
  label: __('Blur Filters', 'blockbite'),
  helper: __('Set the blur filters of the image', 'blockbite'),
  modifiers: [
    {
      id: 'blurfilters',
      label: __('Blur Filters', 'blockbite'),
      options: [...mapOptions(blurValues)],
      className: '',
    },
  ],
};

export const mixblendfilters = {
  id: 'mixblendfilters',
  label: __('Mix Blend Filters', 'blockbite'),
  helper: __('Set the mix blend filters', 'blockbite'),
  modifiers: [
    {
      id: 'mixblendfilters',
      label: __('Mix Blend Filters', 'blockbite'),
      selector: 'mix-blend-',
      options: [...mapOptions(mixblendValues)],
      className: '',
    },
  ],
};

export const opacity = {
  id: 'opacity',
  label: __('Opacity', 'blockbite'),
  helper: __('Create opacity item', 'blockbite'),
  modifiers: [
    {
      id: 'opacity',
      label: __('Opacity', 'blockbite'),
      selector: 'opacity-',
      options: [...mapOptions(opacityUnits)],
      dynamicControl: 'ButtonGroupRange',
    },
  ],
};

export const appearancePanel = {
  id: 'appearance',
  label: 'Appearance',
  expand: true,
  icon: ShadowIcon,
  controls: [
    rounded,
    shadow,
    visibility,
    opacity,
    effectfilters,
    blurfilters,
    mixblendfilters,
  ],
};

export default {
  appearancePanel,
  opacity,
  rounded,
  shadow,
  visibility,
  effectfilters,
  blurfilters,
  mixblendfilters,
  effectFilterValues,
  blurValues,
  mixblendValues,
};