import {
  ColorPicker,
  Label,
  NumberInput,
  NumberRangeValue,
  SelectInput,
  Switch,
  TextFormat,
  TextInput,
} from '@vixoniccom/modules'
import { ShowValidations } from '../utils'

const { personalizado, presetActive, descriptionEnabled, optionalEnabled, imageEnabled, dateEnabled, abbreviatedMonthsCondition, separatorEnabled } = ShowValidations

export const standardInputs = [
  new Label({ label: 'Fuentes', show: presetActive }),
  new TextFormat({ id: 'nameFont', label: 'Fuente del nombre', show: presetActive }),
  new TextFormat({ id: 'descriptionFont', label: 'Fuente de la descripción', show: presetActive }),
  new TextFormat({ id: 'optionalFont', label: 'Fuente del campo opcional', show: presetActive }),
  new TextFormat({ id: 'dateDayFont', label: 'Fuente del día', show: presetActive }),
  new TextFormat({ id: 'dateMonthFont', label: 'Fuente del mes', show: presetActive }),

  new Label({ label: 'Textos', show: personalizado }),
  new SelectInput({
    id: 'textPosition',
    label: 'Posición',
    items: [
      { label: 'Inicio', value: 1 },
      { label: 'Centro', value: 2 },
      { label: 'Final', value: 3 },
    ],
    defaultValue: 2,
    show: personalizado,
  }),
  new SelectInput({
    id: 'textAlignment',
    label: 'Alineación',
    items: [
      { label: 'Inicio', value: 'start' },
      { label: 'Centro', value: 'center' },
      { label: 'Final', value: 'end' },
    ],
    defaultValue: 'center',
    show: personalizado,
  }),

  new Label({ label: 'Nombre', show: personalizado }),
  new TextFormat({ id: 'nameFormat', label: 'Formato', show: personalizado }),
  new NumberInput({ id: 'nameMaxChar', label: 'Caracteres máximos', show: personalizado }),
  new TextInput({
    id: 'textMargin',
    label: 'Margen',
    description: 'Margen derecho de los textos (en porcentaje). Por defecto 4%.',
    show: personalizado,
  }),

  new Switch({
    id: 'descriptionEnabled',
    label: 'Descripción',
    displayOnTrue: 'habilitada',
    displayOnFalse: 'deshabilitada',
    defaultValue: true,
    show: personalizado,
  }),

  new Label({ label: 'Descripción', show: `${personalizado} && ${descriptionEnabled}` }),
  new TextFormat({ id: 'descriptionFormat', label: 'Formato', show: `${personalizado} && ${descriptionEnabled}` }),
  new NumberInput({ id: 'descriptionMaxChar', label: 'Caracteres máximos', show: `${personalizado} && ${descriptionEnabled}` }),

  new Switch({
    id: 'optionalEnabled',
    label: 'Campo opcional',
    displayOnTrue: 'habilitado',
    displayOnFalse: 'deshabilitado',
    defaultValue: true,
    show: personalizado,
  }),

  new Label({ label: 'Campo opcional', show: `${personalizado} && ${optionalEnabled}` }),
  new TextFormat({ id: 'optionalFormat', label: 'Formato', show: `${personalizado} && ${optionalEnabled}` }),

  new Label({ label: 'Fotografía', show: personalizado }),

  new Label({ label: 'Imagen', show: personalizado }),
  new Switch({
    id: 'imageEnabled',
    label: 'Imagen',
    displayOnTrue: 'habilitada',
    displayOnFalse: 'deshabilitada',
    defaultValue: true,
    show: personalizado,
  }),
  new SelectInput({
    id: 'imagePosition',
    label: 'Posición',
    items: [
      { label: 'Inicio', value: 1 },
      { label: 'Centro', value: 2 },
      { label: 'Final', value: 3 },
    ],
    defaultValue: 2,
    show: `${personalizado} && ${imageEnabled}`,
  }),
  new SelectInput({
    id: 'imageAlignment',
    label: 'Alineación',
    items: [
      { label: 'Inicio', value: 'start' },
      { label: 'Centro', value: 'center' },
      { label: 'Final', value: 'end' },
    ],
    defaultValue: 'center',
    show: `${personalizado} && ${imageEnabled}`,
  }),
  new SelectInput({
    id: 'imageStyle',
    label: 'Estilo',
    description: 'Forma de enmarcar la fotografía.',
    required: true,
    items: [
      { label: 'Normal', value: 'normal' },
      { label: 'Redondeado', value: 'rounded' },
      { label: 'Círculo', value: 'circle' },
    ],
    defaultValue: 'normal',
    show: `${personalizado} && ${imageEnabled}`,
  }),
  new TextInput({
    id: 'imageMargin',
    label: 'Margen',
    description: 'Margen derecho de la imagen (en porcentaje). Por defecto 4%.',
    show: `${personalizado} && ${imageEnabled}`,
  }),
  new NumberInput({
    id: 'imageSize',
    label: 'Tamaño',
    description: 'Tamaño de la imagen (en porcentaje).',
    range: new NumberRangeValue(1, 100),
    show: `${personalizado} && ${imageEnabled}`,
  }),

  new Label({ label: 'Fecha', show: personalizado }),
  new Switch({
    id: 'dateEnabled',
    label: 'Fecha',
    displayOnTrue: 'habilitada',
    displayOnFalse: 'deshabilitada',
    defaultValue: true,
    show: personalizado,
  }),
  new SelectInput({
    id: 'datePosition',
    label: 'Posición',
    items: [
      { label: 'Inicio', value: 1 },
      { label: 'Centro', value: 2 },
      { label: 'Final', value: 3 },
    ],
    defaultValue: 3,
    show: `${personalizado} && ${dateEnabled}`,
  }),
  new SelectInput({
    id: 'dateAlignment',
    label: 'Alineación',
    items: [
      { label: 'Inicio', value: 'start' },
      { label: 'Centro', value: 'center' },
      { label: 'Final', value: 'end' },
    ],
    defaultValue: 'center',
    show: `${personalizado} && ${dateEnabled}`,
  }),
  new SelectInput({
    id: 'dateStyle',
    label: 'Estilo',
    description: 'Forma de enmarcar la fotografía.',
    required: true,
    items: [
      { label: 'Calendario simple', value: 'calendarFlat' },
      { label: 'Calendario texto', value: 'calendarText' },
      { label: 'Circular', value: 'circle' },
      { label: 'Texto', value: 'text' },
      { label: 'Líneas', value: 'outlines' },
    ],
    defaultValue: 'calendarFlat',
    show: `${personalizado} && ${dateEnabled}`,
  }),
  new TextFormat({ id: 'dateDayFormat', label: 'Formato del día', show: `${personalizado} && ${dateEnabled}` }),
  new TextFormat({ id: 'dateMonthFormat', label: 'Formato del mes', show: `${personalizado} && ${dateEnabled}` }),
  new Switch({
    id: 'abbreviatedMonths',
    label: 'Meses',
    displayOnTrue: 'abreviados',
    displayOnFalse: 'no abreviados',
    defaultValue: false,
    show: `${personalizado} && ${abbreviatedMonthsCondition}`,
  }),
  new ColorPicker({
    id: 'datePrimaryColor',
    label: 'Color primario',
    show: ShowValidations.dateColorCondition,
  }),
  new TextInput({
    id: 'dateMargin',
    label: 'Margen',
    description: 'Margen derecho de la fecha (en porcentaje). Por defecto 4%.',
    show: `${personalizado} && ${dateEnabled}`,
  }),

  new Label({ label: 'Separador', show: personalizado }),
  new Switch({
    id: 'separator',
    label: 'Separador',
    displayOnTrue: 'habilitado',
    displayOnFalse: 'deshabilitado',
    defaultValue: true,
    show: personalizado,
  }),
  new NumberInput({ id: 'separatorWidth', label: 'Ancho', show: `${personalizado} && ${separatorEnabled}` }),
  new ColorPicker({ id: 'separatorColor', label: 'Color', show: `${personalizado} && ${separatorEnabled}` }),
  new TextInput({
    id: 'itemMargins',
    label: 'Márgenes',
    description: 'Un CSS de longitud de uno o dos valores.',
    pattern: '^(( )?[+-]?[0-9]+.?([0-9]+)?(px|em|ex|%|in|cm|mm|pt|pc)){1,2}$',
    show: `${personalizado} && ${separatorEnabled}`,
  }),
]
