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

export const appearanceInputs = [
  new Label({ label: 'Item' }),
  new TextFormat({ id: 'nameFormat', label: 'Formato del nombre' }),
  new TextFormat({ id: 'valueFormat', label: 'Formato del valor' }),

  new Label({ label: 'Contenedor' }),
  new NumberInput({
    id: 'containerColumns',
    label: 'Columnas',
    description: 'Cantidad de items horizontales',
    range: new NumberRangeValue(1, 999)
  }),
  new NumberInput({
    id: 'containerColumnsGap',
    label: 'Separador horizontal',
    description: 'Espacio entre columnas (en porcentaje)',
    range: new NumberRangeValue(0, 100)
  }),
  new NumberInput({
    id: 'internalElementsGap',
    label: 'Separador horizontal interno',
    description: 'Espacio entre los textos de un elemento (en porcentaje)',
    range: new NumberRangeValue(0, 100)
  }),
  new NumberInput({
    id: 'containerRows',
    label: 'Filas',
    description: 'Cantidad de items verticales',
    range: new NumberRangeValue(1, 999)
  }),
  new NumberInput({
    id: 'containerRowsGap',
    label: 'Separador vertical',
    description: 'Espacio entre filas (en porcentaje)',
    range: new NumberRangeValue(0, 100)
  }),
  new SelectInput({
    id: 'gridBorderStyle',
    label: 'Bordes',
    items: [
      { label: 'Ninguno', value: 'none' },
      { label: 'Horizontales', value: 'horizontal' },
      { label: 'Verticales', value: 'vertical' },
      { label: 'Ambos', value: 'both' }
    ],
    defaultValue: 'none'
  }),
  new ColorPicker({
    id: 'gridBorderColor',
    label: 'Color',
    description: 'Color del borde',
    show: ShowValidations.gridBorderColorEnabled
  }),
  new NumberInput({
    id: 'gridBorderWidth',
    label: 'Ancho',
    description: 'Ancho del borde (en píxeles)',
    range: new NumberRangeValue(0, 999),
    show: ShowValidations.gridBorderColorEnabled
  }),

  new Label({ label: 'Animación' }),
  new SelectInput({
    id: 'animationMode',
    label: 'Modo',
    items: [
      { label: 'Fundido', value: 'fade' },
      { label: 'Izquierda - derecha', value: 'slideRight' },
      { label: 'Derecha - izquierda', value: 'slideLeft' },
    ],
    defaultValue: 'fade'
  }),
  new NumberInput({
    id: 'animationTime',
    label: 'Tiempo',
    description: 'Duracion de cada grupo de datos (en segundos)',
    range: new NumberRangeValue(5, 9999),
    required: true
  }),
  new Switch({
    id: 'animationOrder',
    label: 'Orden',
    displayOnTrue: 'Invertido',
    displayOnFalse: 'Normal',
    defaultValue: false
  }),

  new Label({ label: 'Avanzado' }),
  new TextInput({ id: 'padding', label: 'Márgenes' }),
  new SelectAssetKna({
    id: 'backgroundImage',
    label: 'Imagen de fondo',
    extensions: ['jpg', 'png', 'svg']
  })
]
