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

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

import { ASSETS_URL } from '../../../consts/common';
import { Avatar } from '../../avatar';
import { Button } from '../../button';
import { CustomIcon } from '../../custom-icon';

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

export default {
  component: Alert,
  title: 'Pop Overs/Batch Action',
  argTypes: {
    variant: {
      description: 'The variant to use (for example, `filled` is used in toasters).',
      options: ['filled', 'outlined', 'standard'],
      control: {
        type: 'select'
      },
      defaultValue: {
        summary: 'outlined'
      }
    },
    severity: {
      description: 'The severity of the alert. This defines the color used.',
      options: ['error', 'info', 'success', 'warning'],
      control: {
        type: 'select'
      },
      defaultValue: {
        summary: 'info'
      }
    },
    action: {
      description: 'The action to display. It renders after the message, at the end of the alert.'
    },
    children: {
      description: 'The content of the alert.'
    },
    onClose: {
      description: 'Callback fired when the component requests to be closed.'
    },
    '…': {
      description:
        'Note that there are more props that can be forwarded to the Alert component. More info at https://mui.com/api/alert/'
    }
  }
} as Meta;

const Template: Story<AlertProps> = args => <Alert {...args} />;

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

export const Notification = Template.bind({});
Notification.args = {
  variant: 'filled',
  severity: 'info',
  children: 'This is an alert - Check It out!',
  onClose: () => alert('Will close alert')
};

export const Modal1 = Template.bind({});
Modal1.args = {
  variant: 'standard',
  severity: 'info',
  icon: (
    <Avatar
      backgroundColor="#266FE2"
      customSize={64}
      initials="4"
      variant="square"
      style={{
        borderRadius: '4px 0px 0px 4px',
        margin: '-12px 16px -12px -16px'
      }}
    />
  ),
  children: <Typography variant="h4">Customers selected</Typography>,
  action: (
    <>
      <Button color="third" size="medium">
        Button text
      </Button>
      <Button color="primary" size="medium">
        Button text
      </Button>
    </>
  )
};

export const Modal2 = Template.bind({});
Modal2.args = {
  variant: 'outlined',
  severity: 'info',
  icon: false,
  children: <Typography variant="h4">Database 2FA has been reset successfully!</Typography>,
  action: (
    <Button color="third" size="medium">
      Button text
    </Button>
  ),
  onClose: () => alert('Will close alert')
};

export const Modal3 = Template.bind({});
Modal3.args = {
  variant: 'standard',
  severity: 'info',
  icon: (
    <CustomIcon
      color="inherit"
      size="small"
      src={`${ASSETS_URL}/icons/icon_InfoBig.svg`}
      style={{
        border: '1px solid currentColor',
        borderRadius: '50%',
        marginRight: '8px',
        width: '32px',
        height: '32px'
      }}
    />
  ),
  children: (
    <Typography variant="h6">Are you sure you want to reset password for Keanu Cook?</Typography>
  ),
  action: (
    <>
      <Button color="third" size="medium">
        Cancel
      </Button>
      <Button color="primary" size="medium">
        Reset Password
      </Button>
    </>
  )
};