import { PrimarySelect } from './PrimarySelect';

const opcionesIdioma = [
  { value: 'es', label: 'Español' },
  { value: 'en', label: 'English' },
  { value: 'pt', label: 'Português' },
];

export default {
  title: 'Inputs/PrimarySelect',
  component: PrimarySelect,
  tags: ['autodocs'],
  argTypes: {
    label: {
      control: 'text',
      description: 'Etiqueta opcional encima del desplegable',
    },
    options: {
      description: 'Opciones [{ value, label }]. El consumidor las carga (ej. API).',
    },
    value: {
      control: 'text',
      description: 'Valor seleccionado (controlado con onChange)',
    },
    placeholder: {
      control: 'text',
      description: 'Texto de la opción vacía',
    },
    disabled: {
      control: 'boolean',
      description: 'Desplegable deshabilitado',
    },
    error: {
      control: 'text',
      description: 'Mensaje de error debajo (borde rojo)',
    },
    required: {
      control: 'boolean',
      description: 'Muestra asterisco rojo en el label',
    },
    onChange: {
      action: 'change',
      description: 'Callback al cambiar la selección',
    },
  },
};

export const Default = {
  args: {
    options: opcionesIdioma,
    placeholder: 'Seleccione una opción',
    onChange: (e) => console.log(e.target.value),
  },
};

export const ConLabel = {
  args: {
    label: 'Idioma (predeterminado)',
    options: opcionesIdioma,
    placeholder: 'Seleccione idioma',
    onChange: (e) => console.log(e.target.value),
  },
};

export const ConValor = {
  args: {
    label: 'Idioma',
    options: opcionesIdioma,
    value: 'es',
    placeholder: 'Seleccione idioma',
    onChange: (e) => console.log(e.target.value),
  },
};

export const ConError = {
  args: {
    label: 'Zona horaria',
    options: [
      { value: 'Europe/Madrid', label: 'Europe/Madrid' },
      { value: 'America/Mexico_City', label: 'America/Mexico_City' },
    ],
    value: '',
    placeholder: 'Seleccione zona horaria',
    error: 'Debe seleccionar una zona horaria',
    onChange: (e) => console.log(e.target.value),
  },
};

export const Required = {
  args: {
    label: 'Campo obligatorio',
    options: opcionesIdioma,
    placeholder: 'Seleccione',
    required: true,
    onChange: (e) => console.log(e.target.value),
  },
};

export const Disabled = {
  args: {
    label: 'Deshabilitado',
    options: opcionesIdioma,
    value: 'es',
    placeholder: 'Seleccione idioma',
    disabled: true,
  },
};
