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

import TextAlignCenterIcon from 'blockbite-icons/dist/TextAlignCenter';
import TextAlignLeftIcon from 'blockbite-icons/dist/TextAlignLeft';
import TextAlignRightIcon from 'blockbite-icons/dist/TextAlignRight';
import TextAlignJustifyIcon from 'blockbite-icons/dist/TextAlignJustify';
import TextIcon from 'blockbite-icons/dist/Text';

const colors = getColorObject();

const textAlignValues = [
  { label: 'Left', id: 'left', icon: TextAlignLeftIcon },
  { label: 'Center', id: 'center', icon: TextAlignCenterIcon },
  { label: 'Right', id: 'right', icon: TextAlignRightIcon },
  { label: 'Justify', id: 'justify', icon: TextAlignJustifyIcon },
];

const lineClampValues = [
  { label: '1', id: '1' },
  { label: '2', id: '2' },
  { label: '3', id: '3' },
  { label: '4', id: '4' },
  { label: '5', id: '5' },
  { label: '6', id: '6' },
];

const fontFamilyValues = ['sans', 'serif', 'mono'];

const fontSizeValues = [
  'xs',
  'sm',
  'base',
  'lg',
  'xl',
  '2xl',
  '3xl',
  '4xl',
  '5xl',
  '6xl',
  '7xl',
  '8xl',
  '9xl',
];

const decorationValues = [
  'underline',
  'overline',
  'line-trough',
  'no-underline',
];

const texttransformValues = [
  'uppercase',
  'lowercase',
  'capitalize',
  'normal-case',
];

const lineHeightValues = [
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '10',
  'none',
  'tight',
  'snug',
  'normal',
  'relaxed',
  'loose',
];

const fontWeightValues = [
  'thin',
  'extralight',
  'light',
  'normal',
  'medium',
  'semibold',
  'bold',
  'extrabold',
  'black',
];

const decorationStyle = ['solid', 'dashed', 'dotted', 'double', 'wavy'];

const decorationThickness = [0, 1, 2, 4, 8];

const underlineOffset = [0, 1, 2, 4, 8];

const textcolor = {
  id: 'textalign',
  label: __('Text Align', 'blockbite'),
  helper: __('Text Align', 'blockbite'),
  modifiers: [
    {
      id: 'textalign',
      label: __('Text Color', 'blockbite'),
      selector: 'text-',
      options: [...mapOptions(textAlignValues)],
      display: 'icon',
    },
  ],
};

const fontfamily = {
  id: 'fontfamily',
  label: __('Font Family', 'blockbite'),
  helper: __('Font Family', 'blockbite'),
  display: 'icon',
  dynamicControl: 'ThemeOrNative',
  modifiers: [
    {
      id: 'fontfamily',
      label: __('FontFamilies', 'blockbite'),
      selector: 'font-',
      dynamicControl: 'SelectControl|SelectControl',
      codex: 'themeProvider.fonts|options',
      options: [...mapOptions(fontFamilyValues)],
    },
  ],
};

const fontsize = {
  id: 'fontsize',
  label: __('Font Size', 'blockbite'),
  helper: __('Font Size', 'blockbite'),
  display: 'icon',
  dynamicControl: 'ThemeOrNative',
  modifiers: [
    {
      id: 'fontsize',
      label: __('Fontsizes', 'blockbite'),
      selector: 'text-',
      dynamicControl: 'SelectControl|SelectControl',
      codex: 'themeProvider.fontSizes|options',
      options: [...mapOptions(fontSizeValues)],
    },
  ],
};

const lineclamp = {
  id: 'lineclamp',
  label: __('Line Clamp', 'blockbite'),
  helper: __('Line Clamp', 'blockbite'),
  modifiers: [
    {
      id: 'textalign',
      label: __('Text Color', 'blockbite'),
      selector: 'line-clamp-',
      options: [...mapOptions(lineClampValues)],
    },
  ],
};

const decoration = {
  id: 'decoration',
  label: __('Decoration', 'blockbite'),
  helper: __('Decoration', 'blockbite'),
  modifiers: [
    {
      id: 'decoration',
      label: __('Decoration', 'blockbite'),
      options: [...mapOptions(decorationValues)],
    },
    {
      id: 'decorationcolor',
      label: __('Decoration Color', 'blockbite'),
      selector: 'decoration-',
      options: [...mapOptions(colors)],
      codex: 'colors',
    },
    {
      id: 'decorationstyle',
      label: __('Decoration Style', 'blockbite'),
      selector: 'decoration-',
      options: [...mapOptions(decorationStyle)],
    },
    {
      id: 'decorationthickness',
      label: __('Decoration Thickness', 'blockbite'),
      selector: 'decoration-',
      options: [...mapOptions(decorationThickness)],
    },
    {
      id: 'underlineoffset',
      label: __('Underline Offset', 'blockbite'),
      selector: 'underline-offset-',
      options: [...mapOptions(underlineOffset)],
    },
  ],
};

const texttransform = {
  id: 'texttransform',
  label: __('Text Transform', 'blockbite'),
  helper: __('Text Transform', 'blockbite'),
  modifiers: [
    {
      id: 'texttransform',
      label: __('Text Transform', 'blockbite'),
      options: [...mapOptions(texttransformValues)],
    },
  ],
};

const lineHeight = {
  id: 'lineheight',
  label: __('Line Height', 'blockbite'),
  helper: __('Line Height', 'blockbite'),
  modifiers: [
    {
      id: 'lineheight',
      label: __('Line Height', 'blockbite'),
      selector: 'leading-',
      options: [...mapOptions(lineHeightValues)],
      dynamicControl: 'SelectControl',
    },
  ],
};

const fontWeight = {
  id: 'fontweight',
  label: __('Font Weight', 'blockbite'),
  helper: __('Font Weight', 'blockbite'),
  modifiers: [
    {
      id: 'fontweight',
      label: __('Font Weight', 'blockbite'),
      selector: 'font-',
      options: [...mapOptions(fontWeightValues)],
      dynamicControl: 'SelectControl',
    },
  ],
};

export const typographyPanel = {
  id: 'typography',
  label: __('Typography', 'blockbite'),
  expand: true,
  icon: TextIcon,
  controls: [
    textcolor,
    fontfamily,
    fontsize,
    fontWeight,
    lineHeight,
    texttransform,
    lineclamp,
    decoration,
  ],
};

export default { typographyPanel };