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

export const appearanceInputs = [
  new Label({ label: 'Tema predefinido' }),
  new SelectInput({
    id: 'themePreset',
    label: 'Tema',
    description: 'Elige un tema para aplicar un estilo visual completo. Selecciona "Personalizado" para configurar cada campo de estilo de forma individual.',
    items: [
      { label: 'Personalizado', value: 'personalizado' },
      { label: 'Aniversarios inferior', value: 'preset1' },
      { label: 'Aniversarios lista', value: 'preset2' },
      { label: 'Aniversarios vertical (1 persona)', value: 'preset3' },
      { label: 'Aniversarios lista con fotos', value: 'preset4' },
    ],
  }),

  new Label({ label: 'Orientación', show: ShowValidations.personalizado }),
  new SelectInput({
    id: 'orientation',
    required: true,
    label: 'Orientación',
    items: [
      { label: 'Horizontal', value: 'h' },
      { label: 'Vertical', value: 'v' },
    ],
    defaultValue: 'h',
    show: ShowValidations.personalizado,
  }),

  new Label({ label: 'Animación', show: ShowValidations.personalizado }),
  new SelectInput({
    id: 'animationMode',
    required: true,
    label: 'Tipo de animación',
    items: [
      { label: 'Fundido', value: 'fade' },
      { label: 'Izquierda - derecha', value: 'slideRight' },
      { label: 'Derecha - izquierda', value: 'slideLeft' },
    ],
    defaultValue: 'fade',
    description: 'Por defecto, Fundido.',
    show: ShowValidations.personalizado,
  }),
  new SelectInput({
    id: 'animationSpeed',
    label: 'Velocidad',
    items: [
      { label: 'Lenta', value: 2 },
      { label: 'Normal', value: 1.5 },
      { label: 'Rápida', value: 1 },
    ],
    defaultValue: 1.5,
    show: ShowValidations.personalizado,
  }),
  new Switch({
    id: 'animationOrder',
    label: 'Orden',
    displayOnTrue: 'Invertido',
    displayOnFalse: 'Normal',
    defaultValue: false,
    show: ShowValidations.personalizado,
  }),
  new NumberInput({
    id: 'animationTime',
    label: 'Tiempo',
    description: 'Duración de cada grupo de datos (en segundos).',
    required: true,
    range: new NumberRangeValue(1, 9999),
  }),

  new Label({ label: 'Contenedor', show: ShowValidations.personalizado }),
  new NumberInput({
    id: 'containerColumns',
    label: 'Columnas',
    description: 'Cantidad de items horizontales. Por defecto, 1.',
    range: new NumberRangeValue(1, 999),
    show: ShowValidations.personalizado,
  }),
  new NumberInput({
    id: 'containerColumnsGap',
    label: 'Separador horizontal',
    description: 'Espacio entre columnas (en porcentaje). Por defecto, 1%.',
    range: new NumberRangeValue(1, 100),
    show: ShowValidations.personalizado,
  }),
  new NumberInput({
    id: 'containerRows',
    label: 'Filas',
    description: 'Cantidad de items verticales. Por defecto, 3.',
    range: new NumberRangeValue(1, 999),
    show: ShowValidations.personalizado,
  }),
  new NumberInput({
    id: 'containerRowsGap',
    label: 'Separador vertical',
    description: 'Espacio entre filas (en porcentaje). Por defecto, 5%.',
    range: new NumberRangeValue(1, 100),
    show: ShowValidations.personalizado,
  }),

  new Label({ label: 'Avanzado' }),
  new SelectAssetKna({
    id: 'backgroundImage',
    label: 'Fondo',
    required: false,
    extensions: ['jpg', 'png'],
  }),
  new TextInput({
    id: 'padding',
    required: false,
    label: 'Márgenes',
    description: 'CSS para dar espacio arriba/derecha/abajo/izquieda.',
    show: ShowValidations.personalizado,
  }),
]
