import React from 'react';

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

import { noop } from 'utils/common';

import { Alert } from './Alert';
import { ALERT_SIZE, ALERT_TYPE } from './types';

import styles from './alert.stories.scss';

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

const Template: ComponentStory<typeof Alert> = (props) => (
  <div className={styles['container']}>
    {Object.values(ALERT_TYPE).map((type) => (
      <Alert
        {...props}
        key={type}
        type={type}
      />
    ))}
  </div>
);

export const Regular = Template.bind({});
Regular.args = {
  title: 'Title',
  text: 'Alert content',
  action: {
    text: 'Action',
    onClick: noop,
  },
  link: {
    text: 'Hyperlink',
    attributes: {
      target: '_blank',
      href: 'https://google.com',
    },
  },
};

export const Small = Template.bind({});
Small.args = {
  size: ALERT_SIZE.small,
  text: 'Alert content',
  link: {
    text: 'Hyperlink',
    attributes: {
      target: '_blank',
      href: 'https://google.com',
    },
  },
};