import type { Meta, StoryObj } from '@storybook/html';
import { Toaster, type ToasterOptions } from '@42/core/toast';
import '@42/styles/toast.css';

const snippet = `import { Toaster } from '@42/core/toast';

const toaster = new Toaster(document.querySelector('[data-c42-toast-region]')!, {
  position: 'bottom-right',
  duration: 5000,
});
toaster.show({ title: 'Saved', description: 'Your changes are live.', variant: 'success' });
toaster.on('toast:dismiss', (e) => console.log('dismissed', e.detail.id));`;

const meta: Meta<ToasterOptions> = {
  title: 'Core/Feedback & Status/Toast',
  tags: ['autodocs'],
  parameters: {
    docs: { source: { code: snippet, language: 'ts' } },
  },
  argTypes: {
    position: {
      control: 'select',
      options: [
        'top-left',
        'top-right',
        'top-center',
        'bottom-left',
        'bottom-right',
        'bottom-center',
      ],
    },
    duration: { control: 'number' },
    max: { control: 'number' },
  },
  args: {
    position: 'bottom-right',
    duration: 5000,
  },
  render: (args) => {
    const wrap = document.createElement('div');

    const region = document.createElement('div');
    region.dataset.c42ToastRegion = '';
    wrap.appendChild(region);

    const toaster = new Toaster(region, args);

    const variants: Array<'info' | 'success' | 'warning' | 'error'> = [
      'info',
      'success',
      'warning',
      'error',
    ];
    variants.forEach((variant) => {
      const button = document.createElement('button');
      button.type = 'button';
      button.textContent = `Show ${variant}`;
      button.style.marginRight = '0.5rem';
      button.addEventListener('click', () => {
        toaster.show({
          title: `${variant[0].toUpperCase()}${variant.slice(1)} notification`,
          description: 'This toast auto-dismisses unless duration is 0.',
          variant,
        });
      });
      wrap.appendChild(button);
    });

    return wrap;
  },
};

export default meta;

type Story = StoryObj<ToasterOptions>;

export const Default: Story = {};

export const TopCenter: Story = {
  args: { position: 'top-center' },
};

export const Persistent: Story = {
  args: { duration: 0 },
};