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

export const appeareanceInputs = [
  new Label({ label: 'General' }),
  new SelectAssetKna({ id: 'backgroundImage', label: 'Fondo', required: false, extensions: ['jpg', 'png'] }),
  new Label({ label: 'Posición' }),
  new SelectInput({
    id: 'positionCard',
    label: 'Tipo de posición',
    items: [
      { label: 'Horizontal', value: 'horizontal' },
      { label: 'Vertical', value: 'vertical' },
    ],
  }),
  new Label({ label: 'Diseño de la tarjeta' }),
  new NumberInput({
    id: 'topSeparationCard',
    label: 'Separación desde arriba',
    description: 'Separación de la tarjeta del margen superior',
  }),
  new NumberInput({
    id: 'leftSeparationCard',
    label: 'Separación desde izquierda',
    description: 'Separación de la tarjeta del margen izquierdo',
  }),
  new NumberInput({ id: 'cardWidth', label: 'Ancho', required: false, description: 'Ancho de la tarjeta' }),
  new NumberInput({ id: 'cardHeight', label: 'Alto', required: false, description: 'Altura de la tarjeta' }),
  new NumberInput({
    id: 'cardGap',
    label: 'Separación entre elementos',
    required: false,
    description: 'Separación entre los elementos de la tarjeta',
  }),

  new Label({ label: 'Textos de la tarjeta' }),
  new TextFormat({ id: 'aqiFormat', label: 'Formato del índice de calidad del aire' }),
  new TextFormat({ id: 'stationFormat', label: 'Formato de estación que realizó la medición' }),
  new TextFormat({ id: 'qualityFormat', label: 'Formato del mensaje sobre la calidad del aire' }),

  new Label({ label: 'Datos' }),
  new TextInput({
    id: 'cityInput',
    label: 'Ciudad a buscar',
    description:
      'Ciudad de la que se quiere medir el aire. Para ver la ciudades disponibles se puede consultar aquí: https://aqicn.org/here',
  }),
  new TextInput({ id: 'msj0', label: 'Mensaje sin Datos' }),
  new TextFormat({ id: 'formatMjs', label: 'Formato Mensaje sin Datos' }),
]
