// @flow
import React, { useState, useCallback, useMemo } from 'react';
import { action } from '@storybook/addon-actions';
import { ToastCentre } from './index';
import { Box, TertiaryButton } from '../../../../index';
import docs from './toast-centre.mdx';

const TOAST_MESSAGES = [
  { message: 'first' },
  { message: 'second', level: 'info' },
  { message: 'third', level: 'success' },
  { message: 'fourth', level: 'error' },
];

export default {
  title: 'Components/Overlays/ToastCentre',
  component: ToastCentre,
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Default = () => {
  const [messages, setMessages] = useState([]);
  const toastMessages = useMemo(
    () =>
      TOAST_MESSAGES.map(({ message, ...other }) => ({
        id: `toast-${message}`,
        text: `I am the ${message} toast`,
        onClose: action(`closing the ${message} toast`),
        ...other,
      })),
    [],
  );

  const makeToast = useCallback(() => {
    setMessages(toastMessages);
  }, [toastMessages]);

  return (
    <>
      <Box spacing={['p2']}>
        <TertiaryButton onClick={makeToast}>Make toast</TertiaryButton>
      </Box>

      <ToastCentre messages={messages} />
    </>
  );
};

export const ToastCentreWithCustomDelay = () => {
  const [messages, setMessages] = useState([]);
  const toastMessages = useMemo(
    () =>
      TOAST_MESSAGES.map(({ message, ...other }, index) => ({
        id: `toast-${message}`,
        text: `I am the ${message} toast`,
        timerDelay: index * 1000,
        onClose: action(`closing the ${message} toast`),
        ...other,
      })),
    [],
  );

  const makeToast = useCallback(() => {
    setMessages(toastMessages);
  }, [toastMessages]);

  return (
    <>
      <Box spacing={['p2']}>
        <TertiaryButton onClick={makeToast}>
          Make toast with custom delays
        </TertiaryButton>
      </Box>

      <ToastCentre messages={messages} />
    </>
  );
};
