import { ConfiguracionLocalizacion } from './ConfiguracionLocalizacion';

export default {
  title: 'Layout/ConfiguracionLocalizacion',
  component: ConfiguracionLocalizacion,
  tags: ['autodocs'],
  argTypes: {
    title: {
      control: 'text',
      description: 'Título principal del componente',
    },
    labelText: {
      control: 'text',
      description: 'Label del desplegable (ej. Idioma predeterminado)',
    },
    selectOptions: {
      control: 'object',
      description: 'Opciones del desplegable [{ value, label }]. El consumidor las carga (ej. API).',
    },
    selectPlaceholder: {
      control: 'text',
      description: 'Placeholder del desplegable idioma',
    },
    labelZonaHoraria: {
      control: 'text',
      description: 'Label del desplegable zona horaria',
    },
    zonaHorariaOptions: {
      control: 'object',
      description: 'Opciones zona horaria [{ value, label }]. El consumidor las carga (ej. API).',
    },
    zonaHorariaPlaceholder: {
      control: 'text',
      description: 'Placeholder del desplegable zona horaria',
    },
    actualizacionLabel: {
      control: 'text',
      description: 'Label de la sección (línea 1, junto al icono)',
    },
    actualizacionText: {
      control: 'text',
      description: 'Texto de detalle (línea 2, ej. fecha/hora)',
    },
    guardarButtonDisabled: {
      control: 'boolean',
      description: 'Si está deshabilitado (gris) o habilitado (verde, como Subir imagen)',
    },
    loading: {
      control: 'boolean',
      description: 'Muestra skeleton de carga en lugar del contenido',
    },
  },
};

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

const zonasHorariaEjemplo = [
  { value: 'America/Argentina/Buenos_Aires', label: 'Buenos Aires (GMT-3)' },
  { value: 'America/Mexico_City', label: 'Ciudad de México (GMT-6)' },
  { value: 'America/Lima', label: 'Lima (GMT-5)' },
  { value: 'Europe/Madrid', label: 'Madrid (GMT+1)' },
];

export const Default = {
  args: {
    title: 'CONFIGURACIÓN DE LOCALIZACIÓN',
    labelText: 'Idioma (predeterminado)',
    selectOptions: idiomasEjemplo,
    selectValue: '',
    selectPlaceholder: 'Seleccione idioma',
    selectOnChange: () => {},
    labelZonaHoraria: 'Zona horaria',
    zonaHorariaOptions: zonasHorariaEjemplo,
    zonaHorariaValue: '',
    zonaHorariaPlaceholder: 'Seleccione zona horaria',
    zonaHorariaOnChange: () => {},
    guardarButtonOnClick: () => {},
  },
};

export const ConValores = {
  args: {
    title: 'CONFIGURACIÓN DE LOCALIZACIÓN',
    labelText: 'Idioma (predeterminado)',
    selectOptions: idiomasEjemplo,
    selectValue: 'es',
    selectPlaceholder: 'Seleccione idioma',
    selectOnChange: () => {},
    labelZonaHoraria: 'Zona horaria',
    zonaHorariaOptions: zonasHorariaEjemplo,
    zonaHorariaValue: 'America/Argentina/Buenos_Aires',
    zonaHorariaPlaceholder: 'Seleccione zona horaria',
    zonaHorariaOnChange: () => {},
    guardarButtonDisabled: false,
    guardarButtonOnClick: () => alert('Guardar'),
  },
};

export const Vacío = {
  args: {
    title: 'CONFIGURACIÓN DE LOCALIZACIÓN',
    labelText: 'Idioma (predeterminado)',
    selectOptions: idiomasEjemplo,
    selectValue: '',
    selectPlaceholder: 'Seleccione idioma',
    selectOnChange: () => {},
    labelZonaHoraria: 'Zona horaria',
    zonaHorariaOptions: zonasHorariaEjemplo,
    zonaHorariaValue: '',
    zonaHorariaPlaceholder: 'Seleccione zona horaria',
    zonaHorariaOnChange: () => {},
    guardarButtonOnClick: () => {},
  },
};

export const Loading = {
  args: {
    loading: true,
    title: 'CONFIGURACIÓN DE LOCALIZACIÓN',
    labelText: 'Idioma (predeterminado)',
    labelZonaHoraria: 'Zona horaria',
    actualizacionLabel: 'Última actualización:',
    actualizacionText: 'hace 2 horas',
    guardarButtonText: 'Guardar',
  },
};
