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

import BorderAllIcon from 'blockbite-icons/dist/BorderAll';
import BorderLeftIcon from 'blockbite-icons/dist/BorderLeft';
import BorderRightIcon from 'blockbite-icons/dist/BorderRight';
import BorderTopIcon from 'blockbite-icons/dist/BorderTop';
import BorderBottomIcon from 'blockbite-icons/dist/BorderBottom';
import BorderVerticalIcon from 'blockbite-icons/dist/BorderVertical';
import BorderHorizontalIcon from 'blockbite-icons/dist/BorderHorizontal';

import BorderSolidIcon from 'blockbite-icons/dist/BorderSolid';
import BorderDashedIcon from 'blockbite-icons/dist/BorderDashed';
import BorderDottedIcon from 'blockbite-icons/dist/BorderDotted';
// needs to be created
import BorderWidthIcon from 'blockbite-icons/dist/BorderWidth';
import BorderNoneIcon from 'blockbite-icons/dist/BorderNone';

import DividerHorizontal from 'blockbite-icons/dist/DividerHorizontal';

const borderValues = [
  { label: 'None', id: 'none' },
  { label: '1px', id: '1' },
  { label: '2px', id: '2' },
  { label: '4px', id: '4' },
  { label: '8px', id: '8' },
];

const borderStyleValues = [
  { label: 'Solid', id: 'solid', icon: BorderSolidIcon },
  { label: 'Dashed', id: 'dashed', icon: BorderDashedIcon },
  { label: 'Dotted', id: 'dotted', icon: BorderDottedIcon },
  { label: 'Double', id: 'double', icon: BorderWidthIcon },
  { label: 'None', id: 'none', icon: BorderNoneIcon },
];

export const borderthickness = {
  id: 'borderthickness',
  label: __('Thickness', 'blockbite'),
  helper: __('Thickness', 'blockbite'),
  supports: { hover: true, children: true },
  modifiers: [
    {
      id: 'borderar',
      label: __('Border Around', 'blockbite'),
      selector: 'border-',
      icon: BorderAllIcon,
      options: [...mapOptions(borderValues)],
    },
    {
      id: 'bordertl',
      label: __('Border Top', 'blockbite'),
      selector: 'border-t-',
      icon: BorderTopIcon,
      options: [...mapOptions(borderValues)],
    },
    {
      id: 'borderr',
      label: __('Border Right', 'blockbite'),
      selector: 'border-r-',
      icon: BorderRightIcon,
      options: [...mapOptions(borderValues)],
    },
    {
      id: 'borderb',
      label: __('Border Bottom', 'blockbite'),
      selector: 'border-b-',
      icon: BorderBottomIcon,
      options: [...mapOptions(borderValues)],
    },
    {
      id: 'borderl',
      label: __('Border Left', 'blockbite'),
      selector: 'border-l-',
      icon: BorderLeftIcon,
      options: [...mapOptions(borderValues)],
    },
    {
      id: 'borderx',
      label: __('Border Horizontal', 'blockbite'),
      selector: 'border-x-',
      icon: BorderHorizontalIcon,
      options: [...mapOptions(borderValues)],
    },
    {
      id: 'bordery',
      label: __('Border Vertical', 'blockbite'),
      selector: 'border-y-',
      icon: BorderVerticalIcon,
      options: [...mapOptions(borderValues)],
    },
  ],
};

const borderstyle = {
  id: 'borderstyle',
  label: __('Style', 'blockbite'),
  helper: __('Style', 'blockbite'),
  display: 'icon',
  modifiers: [
    {
      id: 'borderstyle',
      label: __('Border Style', 'blockbite'),
      selector: 'border-',
      options: [...mapOptions(borderStyleValues)],
    },
  ],
};

const bordercolor = {
  id: 'bordercolor',
  label: __('Color', 'blockbite'),
  helper: __('Color', 'blockbite'),
  dynamicControl: 'ThemeOrNative',
  modifiers: [
    {
      id: 'bordercolor',
      label: __('Border Color', 'blockbite'),
      selector: 'border-',
      codex: 'themeProvider.colors|units.colors',
      dynamicControl: 'ColorSwatch|ColorDropdown',
    },
  ],
};

const divider = {
  id: 'divider',
  label: __('Divider', 'blockbite'),
  helper: __('Divider', 'blockbite'),
  modifiers: [
    {
      id: 'dividerx',
      label: __('Horizontal', 'blockbite'),
      selector: 'divide-x-',
      options: [...mapOptions(borderValues)],
      className: 'icon',
    },
    {
      id: 'dividery',
      label: __('Vertical', 'blockbite'),
      selector: 'divide-y-',
      options: [...mapOptions(borderValues)],
    },
  ],
};

const dividercolor = {
  id: 'dividercolor',
  label: __('Color', 'blockbite'),
  helper: __('Color', 'blockbite'),
  dynamicControl: 'ThemeOrNative',
  modifiers: [
    {
      id: 'dividercolor',
      label: __('Divider Color', 'blockbite'),
      selector: 'border-',
      codex: 'themeProvider.colors|units.colors',
      dynamicControl: 'ColorSwatch|ColorDropdown',
    },
  ],
};

const dividestyle = {
  id: 'dividerstyle',
  label: __('Style', 'blockbite'),
  helper: __('Style', 'blockbite'),
  display: 'icon',
  modifiers: [
    {
      id: 'dividerstyle',
      label: __('Divider Style', 'blockbite'),
      selector: 'divide-',
      options: [...mapOptions(borderStyleValues)],
    },
  ],
};

export const borderPanel = {
  id: 'border',
  label: __('Border', 'blockbite'),
  expand: true,
  icon: BorderAllIcon,
  controls: [borderthickness, borderstyle, bordercolor],
};

export const dividerPanel = {
  id: 'divider',
  label: __('Divider', 'blockbite'),
  expand: true,
  icon: DividerHorizontal,
  controls: [divider, dividestyle, dividercolor],
};

export default { borderPanel, dividerPanel };