import React, { useEffect, useReducer, useRef } from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { ToastList } from './ToastList';

const css = styled.div;

const Style = css`
   padding: 20px;
`;

storiesOf('Components/Toast', module)
   .add('default', () => {
      const openModal = (): void =>
         ToastList.show({
            duration: 1000000,
            type: 'danger',
            message:
               "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
         });

      return (
         <Style>
            <button className="btn btn-dark" onClick={openModal} type="button">
               Open Modal
            </button>
            <ToastList />
         </Style>
      );
   })
   .add('default with error', () => {
      const openModal = (): void =>
         ToastList.show({
            message: String(Math.floor(Math.random() * 100)),
            type: 'error',
         });

      return (
         <Style>
            <button className="btn btn-dark" onClick={openModal} type="button">
               Open Modal
            </button>
            <ToastList />
         </Style>
      );
   })
   .add('default with danger', () => {
      const openModal = (): void =>
         ToastList.show({
            message: String(Math.floor(Math.random() * 100)),
            type: 'danger',
         });

      return (
         <Style>
            <button className="btn btn-dark" onClick={openModal} type="button">
               Open Modal
            </button>
            <ToastList />
         </Style>
      );
   })
   .add('default with warning', () => {
      const openModal = (): void =>
         ToastList.show({
            message: String(Math.floor(Math.random() * 100)),
            type: 'warning',
         });

      return (
         <Style>
            <button className="btn btn-dark" onClick={openModal} type="button">
               Open Modal
            </button>
            <ToastList />
         </Style>
      );
   })
   .add('default with success', () => {
      const openModal = (): void =>
         ToastList.show({
            message: String(Math.floor(Math.random() * 100)),
            type: 'success',
         });

      return (
         <Style>
            <button className="btn btn-dark" onClick={openModal} type="button">
               Open Modal
            </button>
            <ToastList />
         </Style>
      );
   })
   .add('toast center', () => {
      const openModal = (): void =>
         ToastList.show({
            message:
               "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
         });

      return (
         <Style>
            <button className="btn btn-dark" onClick={openModal} type="button">
               Open Modal
            </button>
            <ToastList align="center" />
         </Style>
      );
   })
   .add('toast right', () => {
      const openModal = (): void =>
         ToastList.show({
            message:
               "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
         });

      return (
         <Style>
            <button className="btn btn-dark" onClick={openModal} type="button">
               Open Modal
            </button>
            <ToastList align="right" />
         </Style>
      );
   });
