import type { Meta, StoryObj } from '@storybook/html';
import { Alert, type AlertOptions, type AlertVariant } from '@42/core/alert';
import '@42/styles/alert.css';

const snippet = `import { Alert } from '@42/core/alert';
import '@42/styles/alert.css';

const alert = new Alert(document.querySelector('[data-c42-alert]')!, {
  variant: 'warning',
});

alert.on('alert:dismiss', (e) => console.log('dismissed', e.detail.variant));`;

const ICONS: Record<AlertVariant, string> = {
  info: 'ℹ',
  success: '✓',
  warning: '⚠',
  error: '✕',
};

const meta: Meta<AlertOptions> = {
  title: 'Core/Feedback & Status/Alert',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    variant: {
      control: 'select',
      options: ['info', 'success', 'warning', 'error'],
    },
  },
  args: {
    variant: 'info',
  },
  render: (args) => {
    const variant = (args.variant ?? 'info') as AlertVariant;
    const root = document.createElement('div');
    root.dataset.c42Alert = '';
    root.style.maxWidth = '32rem';
    root.innerHTML = `
      <span data-c42-alert-icon aria-hidden="true">${ICONS[variant]}</span>
      <div data-c42-alert-content>
        <strong data-c42-alert-title>Heads up</strong>
        <p data-c42-alert-description>This is a ${variant} callout you can dismiss.</p>
      </div>
      <button data-c42-alert-dismiss aria-label="Dismiss">×</button>`;
    new Alert(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<AlertOptions>;

export const Info: Story = { args: { variant: 'info' } };
export const Success: Story = { args: { variant: 'success' } };
export const Warning: Story = { args: { variant: 'warning' } };
export const Error: Story = { args: { variant: 'error' } };