import { Article } from './Article';

export default {
  title: 'Layout/Article',
  component: Article,
  tags: ['autodocs'],
  argTypes: {
    title: { control: 'text', description: 'Título del header' },
    message: { control: 'text', description: 'Texto del cuerpo; si existe se muestra el bloque con icono de advertencia' },
    primaryButtonText: { control: 'text' },
    secondaryButtonText: { control: 'text' },
    onClose: { action: 'close' },
    onPrimaryClick: { action: 'primaryClick' },
    onSecondaryClick: { action: 'secondaryClick' },
    withOverlay: { control: 'boolean' },
    overlayCloseOnClick: { control: 'boolean' },
    onOverlayClick: { action: 'overlayClick' },
  },
};

export const DefaultConEstiloBase = {
  args: {
    title: 'Título del artículo',
    onClose: () => console.log('Cerrar'),
    message:
      'Este es el texto de contenido. Si se pasa message, se muestra el icono de advertencia a la izquierda y este texto en estilo body-lg con color #29474C.',
    primaryButtonText: 'Aceptar',
    secondaryButtonText: 'Cancelar',
    onPrimaryClick: () => console.log('Aceptar'),
    onSecondaryClick: () => console.log('Cancelar'),
  },
};

export const Default = {
  args: {
    title: 'Título del artículo',
    onClose: () => console.log('Cerrar'),
    message:
      'Este es el texto de contenido. Si se pasa message, se muestra el icono de advertencia a la izquierda y este texto en estilo body-lg con color #29474C.',
    primaryButtonText: 'Aceptar',
    secondaryButtonText: 'Cancelar',
    onPrimaryClick: () => console.log('Aceptar'),
    onSecondaryClick: () => console.log('Cancelar'),
  },
};

export const ComoModalConOverlay = {
  args: {
    withOverlay: true,
    overlayCloseOnClick: true,
    title: 'Descartar cambios',
    message:
      'Los datos ingresados no se guardarán y se perderán de forma permanente. Esta acción no se puede deshacer.',
    primaryButtonText: 'Descartar',
    secondaryButtonText: 'Cancelar',
    onPrimaryClick: () => console.log('Descartar'),
    onSecondaryClick: () => console.log('Cancelar'),
    onClose: () => console.log('Cerrar'),
    onOverlayClick: () => console.log('Overlay click'),
  },
};

export const SinMensajeDeAdvertencia = {
  args: {
    title: 'Solo título y botones',
    onClose: () => console.log('Cerrar'),
    primaryButtonText: 'Guardar',
    secondaryButtonText: 'Descartar',
    onPrimaryClick: () => console.log('Guardar'),
    onSecondaryClick: () => console.log('Descartar'),
  },
};

export const ConContenidoCustom = {
  args: {
    title: 'Artículo con contenido custom',
    onClose: () => console.log('Cerrar'),
    primaryButtonText: 'Continuar',
    secondaryButtonText: 'Volver',
    onPrimaryClick: () => console.log('Continuar'),
    onSecondaryClick: () => console.log('Volver'),
  },
  render: (args) => (
    <Article {...args}>
      <p style={{ fontFamily: 'var(--font-family-sans)', fontSize: 16, lineHeight: 24, color: 'var(--color-main-800, #29474C)', margin: 0 }}>
        Puedes pasar <code>children</code> en lugar de <code>message</code> para renderizar contenido personalizado sin el icono de advertencia.
      </p>
    </Article>
  ),
};

export const SoloPrimario = {
  args: {
    title: 'Confirmación',
    message: '¿Deseas continuar con esta acción?',
    primaryButtonText: 'Sí, continuar',
    onClose: () => console.log('Cerrar'),
    onPrimaryClick: () => console.log('Continuar'),
  },
};
