import { Preferencias } from './Preferencias';

export default {
  title: 'Layout/Preferencias',
  component: Preferencias,
  tags: ['autodocs'],
  argTypes: {
    loading: {
      control: 'boolean',
      description: 'Muestra skeleton de carga',
    },
    title: {
      control: 'text',
      description: 'Título principal del componente',
    },
    labelText: {
      control: 'text',
      description: 'Label del desplegable idioma',
    },
    selectOptions: {
      control: 'object',
      description: 'Opciones idioma: array de { value, label }',
    },
    selectValue: {
      control: 'text',
      description: 'Valor seleccionado idioma',
    },
    selectPlaceholder: {
      control: 'text',
      description: 'Placeholder idioma',
    },
    selectOnChange: {
      action: 'selectOnChange',
      description: 'Callback onChange idioma',
    },
    selectDisabled: {
      control: 'boolean',
      description: 'Deshabilita idioma',
    },
    labelZonaHoraria: {
      control: 'text',
      description: 'Label del desplegable zona horaria',
    },
    zonaHorariaOptions: {
      control: 'object',
      description: 'Opciones zona horaria: array de { value, label }',
    },
    zonaHorariaValue: {
      control: 'text',
      description: 'Valor seleccionado zona horaria',
    },
    zonaHorariaPlaceholder: {
      control: 'text',
      description: 'Placeholder zona horaria',
    },
    zonaHorariaOnChange: {
      action: 'zonaHorariaOnChange',
      description: 'Callback onChange zona horaria',
    },
    zonaHorariaDisabled: {
      control: 'boolean',
      description: 'Deshabilita zona horaria',
    },
    actualizacionLabel: {
      control: 'text',
      description: 'Texto línea 1 junto al reloj',
    },
    actualizacionText: {
      control: 'text',
      description: 'Detalle línea 2; vacío oculta la segunda línea',
    },
    showUltimaActualizacion: {
      control: 'boolean',
      description: 'Muestra u oculta la sección de Última actualización',
    },
    actualizacionLabelStyle: {
      control: false,
      description: 'Estilos inline opcionales del label (objeto)',
    },
    actualizacionTextStyle: {
      control: false,
      description: 'Estilos inline opcionales del detalle (objeto)',
    },
    actualizacionLabelClassName: {
      control: 'text',
      description: 'className del label',
    },
    actualizacionTextClassName: {
      control: 'text',
      description: 'className del detalle',
    },
    guardarButtonText: {
      control: 'text',
      description: 'Texto del botón guardar',
    },
    guardarButtonDisabled: {
      control: 'boolean',
      description: 'Habilita o deshabilita el botón',
    },
    guardarButtonOnClick: {
      action: 'guardarButtonOnClick',
      description: 'Callback onClick guardar',
    },
  },
};

/** Opciones custom: usar códigos es-AR / en-US para que `syncLanguageWithI18n` actualice i18next */
const idiomasEjemplo = [
  { value: 'es-AR', label: 'Español' },
  { value: 'en-US', label: 'English' },
];

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

export const Default = {
  args: {
    loading: false,
    selectOptions: idiomasEjemplo,
    selectValue: '',
    selectOnChange: () => {},
    selectDisabled: false,
    labelZonaHoraria: undefined,
    zonaHorariaOptions: zonasHorariaEjemplo,
    zonaHorariaValue: '',
    zonaHorariaOnChange: () => {},
    zonaHorariaDisabled: false,
    guardarButtonDisabled: false,
    guardarButtonOnClick: () => {},
    showUltimaActualizacion: true,
  },
};

/** Sin `selectOptions`: Español / English integrados; cambio de idioma aplica a todo el árbol i18n */
export const BuiltinLanguageEsEn = {
  args: {
    loading: false,
    selectOptions: [],
    builtinLanguageSelect: true,
    zonaHorariaOptions: zonasHorariaEjemplo,
    zonaHorariaValue: '',
    zonaHorariaOnChange: () => {},
    guardarButtonDisabled: false,
    guardarButtonOnClick: () => {},
    showUltimaActualizacion: true,
  },
};

export const Loading = {
  args: {
    loading: true,
    showUltimaActualizacion: true,
  },
};
