import type { Meta, StoryObj } from '@storybook/react-vite';

import { Toaster, toast } from './toast';
import { Button } from '../button/button';

const meta = {
  title: 'Components/Toast',
  component: Toaster,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Toast host. Mount `<Toaster />` once near the root of the app, then call `toast()` from anywhere. Hovering or focusing a toast pauses its timer.\n\nEach kind selects a colour palette — `success` → green, `error` → red, `warning` → yellow, `info` → secondary, and a plain toast → the neutral palette. The fill, the accent down the leading edge and the icon all read from that one choice, so a toast matches the rest of the UI in both themes.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Toaster>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Kinds: Story = {
  render: (args) => (
    <>
      <Toaster {...args} />
      <div className="flex flex-wrap gap-2">
        <Button variant="outline" onClick={() => toast('Draft saved')}>
          Default
        </Button>
        <Button variant="outline" onClick={() => toast.success('Deployment finished')}>
          Success
        </Button>
        <Button variant="outline" onClick={() => toast.info('A new version is available')}>
          Info
        </Button>
        <Button variant="outline" onClick={() => toast.warning('You are near your quota')}>
          Warning
        </Button>
        <Button variant="outline" onClick={() => toast.error('Payment failed')}>
          Error
        </Button>
      </div>
    </>
  ),
};

/** An undo action turns a destructive change into a recoverable one. */
export const WithAction: Story = {
  render: (args) => (
    <>
      <Toaster {...args} />
      <Button
        variant="outline"
        onClick={() =>
          toast('Message archived', {
            description: 'It was moved out of your inbox.',
            action: { label: 'Undo', onClick: () => toast.success('Restored') },
          })
        }
      >
        Archive message
      </Button>
    </>
  ),
};

/** Named `PromiseToast` rather than `Promise` so it does not shadow the global. */
export const PromiseToast: Story = {
  render: (args) => (
    <>
      <Toaster {...args} />
      <Button
        variant="outline"
        onClick={() =>
          toast.promise(new Promise<void>((resolve) => setTimeout(resolve, 1800)), {
            loading: 'Publishing…',
            success: 'Published',
            error: 'Could not publish',
          })
        }
      >
        Publish
      </Button>
    </>
  ),
};