import React from 'react';
import { Meta, StoryFn } from "@storybook/react-webpack5";
import Toasts from '@molecules/Toasts/Toasts';
import Button from '@atoms/Button/Button';
import { ToastProps } from '@molecules/Toasts/Toasts';
import { useState } from 'storybook/preview-api';
import { bgs } from '@/constants';

export default {
  title: 'molecules/Toasts',
  component: Toasts,
  argTypes: {
    bg: {
      options: Object.values(bgs),
      control: {type: 'select'},
    }
  },
} as Meta<typeof Toasts>;

const Template: StoryFn<ToastProps> = (args) => {
  const [show, setShow] = useState(true);
  const onClose = () => setShow(false);
  return <>
    <Toasts {...args} show={show} onClose={onClose} />
    {!show && <Button onClick={() => setShow(true)}>Click show Toasts</Button>}
  </>;
};

export const _Toasts = Template.bind({});
_Toasts.args = {
  header: (
    <>
      <strong className="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
    </>
  ),
  children: (
    'Hello, world! This is a toast message.'
  ),
  show: false,
  position: undefined,
  delay: 3000,
  autohide: false,
  bg: undefined,
};