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

import Grid from '@mui/material/Grid';

import { Alert } from '../alert';
import type { AlertProps } from '../alert';

import { Toaster } from './toaster';
import type { ToasterProps } from './toaster';

export default {
  component: Toaster,
  title: 'Pop Overs/Toaster',
  argTypes: {
    severity: {
      description: 'The severity of the alert. This defines the color used.',
      options: ['error', 'info', 'success', 'warning'],
      control: {
        type: 'select'
      },
      defaultValue: {
        summary: 'info'
      }
    },
    children: {
      description: 'The content of the toaster.'
    },
    onClose: {
      description: 'Callback fired when the component requests to be closed.'
    },
    alertProps: {
      description:
        'Props which will be forwarded into the Alert component. More info at https://mui.com/api/alert/'
    }
  }
} as Meta;

const Template: Story<ToasterProps> = args => {
  return <Toaster {...args} />;
};

export const Primary = Template.bind({});
Primary.args = {
  severity: 'info',
  children: 'This is an info alert — Check It out!',
  onClose: () => alert('Will close toaster'),
  open: true,
  alertProps: {}
};