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

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

const meta: Meta<typeof toast> = {
  title: 'Components/Toast',
};

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

export const SimpleToast: Story = {
  name: 'Simple Toast',
  render: () => (
    <>
      <Toaster />
      <div style={{ display: 'flex', gap: '0.5rem', width: '50%' }}>
        <Button onClick={() => toast({ title: 'You did something good' })}>Success toast</Button>
        <Button onClick={() => toast({ title: 'You have been warned buddy', type: 'warning' })}>Warning toast</Button>
        <Button onClick={() => toast({ title: 'There was a oopsie daisy ', type: 'error' })}>Error toast</Button>
        <Button onClick={() => toast({ title: 'Let me inform you about something  ', type: 'info' })}>
          Info toast
        </Button>
      </div>
    </>
  ),
};
export const WarningToast: Story = {
  name: 'Toast with message ',
  render: () => (
    <>
      <Toaster />
      <div
        className="flex w-full
        gap-4"
      >
        <Button
          onClick={() =>
            toast({
              title: 'You did alot of good',
              message: 'So let me tell you are story about the bread and the toast',
            })
          }
        >
          Success message
        </Button>

        <Button
          onClick={() =>
            toast({
              title: 'You have been warned with a explanation',
              type: 'warning',
              message: 'Here i could explain in detail why i am warning you.',
            })
          }
        >
          Warning message
        </Button>
        <Button
          onClick={() =>
            toast({
              title: 'There was an oopsie daisy',
              type: 'error',
              message: 'And it happend because you clicked the button above',
            })
          }
        >
          Error message
        </Button>
        <Button
          onClick={() =>
            toast({
              title: 'This is that something',
              type: 'info',
              message: 'And this is something with more details',
            })
          }
        >
          Info message
        </Button>
      </div>
    </>
  ),
};

export const TimeoutToast: Story = {
  name: 'Timeout toast',
  render: () => (
    <>
      <Toaster />
      <div style={{ display: 'flex', gap: '1rem', width: '100%' }}>
        <Button onClick={() => toast({ title: 'Can you read this? ', timeout: 500, type: 'info' })}>Quick toast</Button>

        <Button
          onClick={() =>
            toast({
              title: 'A slow message',
              message: 'With with 20s duration, you can cross it out if you hover it ',
              timeout: 20000,
              type: 'info',
            })
          }
        >
          A slow toast
        </Button>
      </div>
    </>
  ),
};
