import React, { ReactElement, useCallback } from 'react';

import { ComponentStory, ComponentMeta } from '@storybook/react';

import { SnackbarProvider, ToastOptions, BorderSvg, Button } from 'components';
import { noop } from 'utils/common';

import { THEME } from '../../constants';
import { useManageToasts } from './hooks';
import { TOAST_TYPE } from './components';
import { ToastsManagerProps } from './types';

export default {
  title: 'ReactComponentLibrary/Toasts',
  component: SnackbarProvider,
  decorators: [(Story): JSX.Element => <Story />],
} as ComponentMeta<typeof SnackbarProvider>;

const ToastsManager = ({ toasts, theme = THEME.light }: ToastsManagerProps): ReactElement => {
  const maxKey = 100000;

  const { openToast } = useManageToasts(theme);

  toasts.forEach((toast: ToastOptions) => {
    openToast(toast);
  });

  const clickHandler = useCallback(() => {
    const id = String(Math.floor(Math.random() * maxKey));
    const firstIndex = 0;
    openToast({ ...toasts[firstIndex], id });
  }, [toasts, openToast]);

  return (
    <Button
      onClick={clickHandler}
      caption="Add toast"
      theme={theme}
    />
  );
};

const Template: ComponentStory<typeof ToastsManager> = (args) => {
  return (
    <SnackbarProvider>
      <BorderSvg />
      <ToastsManager
        toasts={args.toasts}
        theme={args.theme}
      />
    </SnackbarProvider>
  );
};

const mockToasts = {
  simple: [
    {
      id: '1',
      message: (
        <>
          Hi, I am light <b>success</b> toast
        </>
      ),
      type: TOAST_TYPE.SUCCESS,
    },
    {
      id: '2',
      message: (
        <>
          Hi, I am light <b>warning</b> toast
        </>
      ),
      type: TOAST_TYPE.WARNING,
    },
    {
      id: '3',
      message: (
        <>
          Hi, I am light <b>error</b> toast
        </>
      ),
      type: TOAST_TYPE.ERROR,
    },
  ],
  withAction: [
    {
      id: '1',
      message: (
        <>
          Hi, I am light <b>success</b> toast with undo action
        </>
      ),
      type: TOAST_TYPE.SUCCESS,
      actionButton: {
        text: 'Undo',
        action: noop,
      },
    },
    {
      id: '2',
      message: (
        <>
          Hi, I am light <b>warning</b> toast with undo action
        </>
      ),
      type: TOAST_TYPE.WARNING,
      actionButton: {
        text: 'Undo',
        action: noop,
      },
    },
    {
      id: '3',
      message: (
        <>
          Hi, I am light <b>error</b> toast with undo action
        </>
      ),
      type: TOAST_TYPE.ERROR,
      actionButton: {
        text: 'Undo',
        action: noop,
      },
    },
  ],
  withLongText: [
    {
      id: '1',
      message: "Hi, I'm light success toast and my text message should be long and fit 3 lines",
      type: TOAST_TYPE.SUCCESS,
    },
    {
      id: '2',
      message: "Hi, I'm light warning toast and my text message should be long and fit 3 lines",
      type: TOAST_TYPE.WARNING,
    },
    {
      id: '3',
      message: "Hi, I'm light error toast and my text message should be long and fit 3 lines",
      type: TOAST_TYPE.ERROR,
    },
  ],
  withLongTextAndAction: [
    {
      id: '1',
      message: "Hi, I'm light success toast and my text message should be long and fit 3 lines",
      type: TOAST_TYPE.SUCCESS,
      actionButton: {
        text: 'Undo',
        action: noop,
      },
    },
    {
      id: '2',
      message: "Hi, I'm light warning toast and my text message should be long and fit 3 lines",
      type: TOAST_TYPE.WARNING,
      actionButton: {
        text: 'Undo',
        action: noop,
      },
    },
    {
      id: '3',
      message: "Hi, I'm light error toast and my text message should be long and fit 3 lines",
      type: TOAST_TYPE.ERROR,
      actionButton: {
        text: 'Undo',
        action: noop,
      },
    },
  ],
};

export const LightToasts = Template.bind({});
LightToasts.args = {
  toasts: mockToasts.simple,
};

export const LightToastWithAction = Template.bind({});
LightToastWithAction.args = {
  toasts: mockToasts.withAction,
};

export const LightToastsWithLongText = Template.bind({});
LightToastsWithLongText.args = {
  toasts: mockToasts.withLongText,
};

export const LightToastsWithLongTextAndAction = Template.bind({});
LightToastsWithLongTextAndAction.args = {
  toasts: mockToasts.withLongTextAndAction,
};

export const DarkToasts = Template.bind({});
DarkToasts.args = {
  toasts: mockToasts.simple,
  theme: THEME.dark,
};
DarkToasts.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkToastWithAction = Template.bind({});
DarkToastWithAction.args = {
  toasts: mockToasts.withAction,
  theme: THEME.dark,
};
DarkToastWithAction.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkToastsWithLongText = Template.bind({});
DarkToastsWithLongText.args = {
  toasts: mockToasts.withLongText,
  theme: THEME.dark,
};
DarkToastsWithLongText.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkToastsWithLongTextAndAction = Template.bind({});
DarkToastsWithLongTextAndAction.args = {
  toasts: mockToasts.withLongTextAndAction,
  theme: THEME.dark,
};
DarkToastsWithLongTextAndAction.parameters = {
  backgrounds: { default: 'dark' },
};