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

export const appearanceInputs = [
  new Label({ label: 'Orientación' }),
  new SelectInput({
    id: 'orientation',
    required: true,
    label: 'Orientación',
    items: [
      { label: 'Horizontal', value: 'h' },
      { label: 'Vertical', value: 'v' },
    ],
    defaultValue: 'h',
  }),

  new Label({ label: 'Animación' }),
  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.'
  }),
  new SelectInput({
    id: 'animationSpeed',
    label: 'Velocidad',
    items: [
      { label: 'Lenta', value: 2 },
      { label: 'Normal', value: 1.5 },
      { label: 'Rápida', value: 1 },
    ],
    defaultValue: 1.5,
  }),
  new Switch({
    id: "animationOrder",
    label: "Orden",
    displayOnTrue: "Invertido",
    displayOnFalse: "Normal",
    defaultValue: false
  }),
  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' }),
  new NumberInput({
    id: 'containerColumns',
    label: 'Columnas',
    description: 'Cantidad de items horizontales. Por defecto, 1.',
    range: new NumberRangeValue(1, 999),
  }),
  new NumberInput({
    id: 'containerColumnsGap',
    label: 'Separador horizontal',
    description: 'Espacio entre columnas (en porcentaje). Por defecto, 1%.',
    range: new NumberRangeValue(1, 100),
  }),
  new NumberInput({
    id: 'containerRows',
    label: 'Filas',
    description: 'Cantidad de items verticales. Por defecto, 3.',
    range: new NumberRangeValue(1, 999),
  }),
  new NumberInput({
    id: 'containerRowsGap',
    label: 'Separador vertical',
    description: 'Espacio entre filas (en porcentaje). Por defecto, 5%.',
    range: new NumberRangeValue(1, 100),
  }),

  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.',
  }),
]
