import { AlertProps, Alert } from '../alert';
import { Modal } from '../modal';
import { Button } from '../../button';
import { Story, Meta, Args, ArgTypes } from '@storybook/react';
import Notification, { openModal, showNotif, closeModal } from './notification';
import type { NotificationProps } from './notification.types';

type ShowNotifArgs = {
  message: string;
  ms: number;
  method: 'replace' | 'wait';
  withCloseButton: boolean;
  severity: AlertProps['severity'];
  variant: AlertProps['variant'];
  disableDismissMethod: NotificationProps['disableDismissMethod'];
};

const args: ShowNotifArgs = {
  message: 'some message',
  ms: 6000,
  method: 'wait',
  withCloseButton: false,
  severity: 'info',
  variant: 'filled',
  disableDismissMethod: { clickaway: true }
};

// TODO: Add disableDismissMethod control
const argTypes: Partial<ArgTypes<Args>> = {
  message: {
    control: { type: 'text' },
    description: 'The Message to display'
  },
  ms: {
    control: { type: 'number' },
    defaultValue: 6000,
    description: 'Time until auto hide in MS'
  },
  withCloseButton: {
    control: { type: 'boolean' },
    description: 'Show close button?',
    defaultValue: false
  },
  method: {
    control: { type: 'inline-radio' },
    options: ['replace', 'wait'],
    defaultValue: 'wait',
    description: 'Replace with existing notification or wait for current notification dismiss',
    type: 'string'
  },
  severity: {
    control: { type: 'inline-radio' },
    options: ['info', 'error', 'success', 'warning'],
    defaultValue: 'info',
    description: 'Severity of Alert component'
  },
  variant: {
    control: { type: 'inline-radio' },
    options: ['outlined', 'filled', 'standard'],
    description: 'Variant of Alert component',
    defaultValue: 'filled'
  },
  horizontal: {
    type: 'string',
    control: {
      type: 'inline-radio'
    },
    options: ['center', 'left', 'right'],
    defaultValue: 'center',
    description: 'Horizontal notification position'
  },
  vertical: {
    type: 'string',
    control: {
      type: 'inline-radio'
    },
    options: ['top', 'bottom'],
    defaultValue: 'top',
    description: 'Vertical notification position'
  },
  onBeforeClose: {
    action: 'onBeforeClose',
    description: 'A callback that fires before notification closed',
    type: 'function'
  },
  onAfterClose: {
    action: 'onAfterClose',
    description: 'A callback that fires after notification closed',
    type: 'function'
  },
  onModalOpened: {
    action: 'onModalOpened',
    description: 'A callback that fires after modal has opened',
    type: 'function'
  }
};

export default {
  args,
  component: Notification,
  title: 'Pop Overs/New Notification',
  subcomponents: { Alert, Modal },
  argTypes,
  parameters: { docs: { page: null } }
} as Meta;

const Template: Story = ({
  message,
  severity,
  variant,
  ms,
  withCloseButton,
  method,
  horizontal,
  vertical,
  onBeforeClose,
  onAfterClose,
  onModalOpened,

  disableDismissMethod,
  ...rest
}) => {
  const handleClick = (type: string) =>
    type === 'notif'
      ? showNotif(message, {
          method,
          withCloseButton,
          onBeforeClose,
          onAfterClose,
          ms,
          disableDismissMethod,
          alertProps: {
            severity,
            variant
          },
          snackbarProps: {
            anchorOrigin: { horizontal, vertical }
          }
        })
      : openModal(
          {
            dialogTitleProps: { children: 'This is a Modal' },
            dialogContentProps: { children: 'This is the Modal content' },
            dialogActionsProps: {
              children: (
                <>
                  <Button onClick={() => closeModal()}>Close Modal</Button>
                  <Button>Some Action</Button>
                </>
              )
            }
          },
          onModalOpened
        );

  return (
    <>
      <Button onClick={() => handleClick('notif')}>Add Notification</Button>
      <Button onClick={() => handleClick('modal')}>Open Modal</Button>
      <Notification />
    </>
  );
};

export const Primary = Template.bind({});
Primary.args = {};