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

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

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

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

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

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

  new Label({ label: 'Campo opcional', show: ShowValidations.optionalEnabled }),
  new TextFormat({ id: 'optionalFormat', label: 'Formato', show: ShowValidations.optionalEnabled }),

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

  new Label({ label: 'Imagen' }),
  new Switch({
    id: 'imageEnabled',
    label: 'Imagen',
    displayOnTrue: 'habilitada',
    displayOnFalse: 'deshabilitada',
    defaultValue: true,
  }),
  new SelectInput({
    id: 'imagePosition',
    label: 'Posición',
    items: [
      { label: 'Inicio', value: 1 },
      { label: 'Centro', value: 2 },
      { label: 'Final', value: 3 },
    ],
    defaultValue: 2,
    show: ShowValidations.imageEnabled,
  }),
  new SelectInput({
    id: 'imageAlignment',
    label: 'Alineación',
    items: [
      { label: 'Inicio', value: 'start' },
      { label: 'Centro', value: 'center' },
      { label: 'Final', value: 'end' },
    ],
    defaultValue: 'center',
    show: ShowValidations.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: ShowValidations.imageEnabled,
  }),
  new TextInput({
    id: 'imageMargin',
    label: 'Margen',
    description: 'Margen derecho de la imagen (en porcentaje). Por defecto 4%.',
    show: ShowValidations.imageEnabled,
  }),
  new NumberInput({
    id: 'imageSize',
    label: 'Tamaño',
    description: 'Tamaño de la imagen (en porcentaje).',
    range: new NumberRangeValue(1, 100),
    show: ShowValidations.imageEnabled,
  }),

  new Label({ label: 'Fecha' }),
  new Switch({
    id: 'dateEnabled',
    label: 'Fecha',
    displayOnTrue: 'habilitada',
    displayOnFalse: 'deshabilitada',
    defaultValue: true,
  }),
  new SelectInput({
    id: 'datePosition',
    label: 'Posición',
    items: [
      { label: 'Inicio', value: 1 },
      { label: 'Centro', value: 2 },
      { label: 'Final', value: 3 },
    ],
    defaultValue: 3,
    show: ShowValidations.dateEnabled,
  }),
  new SelectInput({
    id: 'dateAlignment',
    label: 'Alineación',
    items: [
      { label: 'Inicio', value: 'start' },
      { label: 'Centro', value: 'center' },
      { label: 'Final', value: 'end' },
    ],
    defaultValue: 'center',
    show: ShowValidations.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: ShowValidations.dateEnabled,
  }),
  new TextFormat({ id: 'dateDayFormat', label: 'Formato del día', show: ShowValidations.dateEnabled }),
  new TextFormat({ id: 'dateMonthFormat', label: 'Formato del mes', show: ShowValidations.dateEnabled }),
  new Switch({
    id: 'abbreviatedMonths',
    label: 'Meses',
    displayOnTrue: 'abreviados',
    displayOnFalse: 'no abreviados',
    defaultValue: false,
    show: ShowValidations.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: ShowValidations.dateEnabled,
  }),

  new Label({ label: 'Separador' }),
  new Switch({
    id: 'separator',
    label: 'Separador',
    displayOnTrue: 'habilitado',
    displayOnFalse: 'deshabilitado',
    defaultValue: true,
  }),
  new NumberInput({ id: 'separatorWidth', label: 'Ancho', show: ShowValidations.separatorEnabled }),
  new ColorPicker({ id: 'separatorColor', label: 'Color', show: ShowValidations.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: ShowValidations.separatorEnabled,
  }),
]
