import { Button } from '@components/ui/button/button'
import { toast, Toaster } from 'sonner'
import { Meta, StoryObj } from '@storybook/react-vite'

const meta: Meta<typeof Toaster> = {
  title: 'Toast',
  parameters: {},
  argTypes: {
    closeButton: {
      control: 'boolean',
    },
    richColors: {
      control: 'boolean',
    },
    position: {
      control: 'select',
      options: ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],
    },
    expand: {
      control: 'boolean',
    },
  },
}

export default meta

export const ToastExamples: StoryObj<typeof meta> = {
  args: {
    closeButton: false,
    richColors: true,
    position: 'bottom-right',
    expand: false,
  },
  render: (args) => (
    <div className="h-[250px]">
      <Toaster
        position={args.position}
        expand={args.expand}
        richColors={args.richColors}
        closeButton={args.closeButton}
      />
      <div className="flex gap-2">
        <Button variant="outline" onClick={() => toast('default toast message')}>
          default toast
        </Button>
        <Button variant="outline" onClick={() => toast.error('uh oh')}>
          error toast
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            toast('Event has been created', {
              action: {
                label: 'Undo',
                onClick: () => alert('can not be undone *hohoho'),
              },
            })
          }
        >
          action toast
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            toast.message('Event has been created', {
              description: 'Monday, January 3rd at 6:00pm',
            })
          }
        >
          description toast
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            toast.custom((t) => (
              <div className="flex flex-col border border-border p-3 gap-2 rounded shadow bg-(--sidebar-primary-foreground)">
                <h2>such a beautiful toast</h2>
                <p className="mb-2">lorem ipsum dolor sit amet</p>
                <button onClick={() => toast.dismiss(t)}>Dismiss</button>
              </div>
            ))
          }
        >
          bla
        </Button>
      </div>
    </div>
  ),
}
