import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { GlobalAlerts } from '../GlobalAlerts';
import { productAlertsMock } from '../../../../mocks/product/productAlerts';
import { ALERT_LEAD_ADD_SUCCESS, ALERT_QUESTION_ADD_SUCCESS, ALERT_QUESTION_ADD_ERROR, ALERT_REVIEW_ADD_SUCCESS, addAlert } from '../../../tools/alerts';
import * as GlobalAlertStories from './GlobalAlert.stories';

export const QuestionSuccess = () => {
    addAlert(ALERT_QUESTION_ADD_SUCCESS);
    return (<GlobalAlerts data={productAlertsMock} persist />);
};

export const QuestionError = () => {
    addAlert(ALERT_QUESTION_ADD_ERROR);
    return (<GlobalAlerts data={productAlertsMock} persist />);
};

export const LeadSuccess = () => {
    addAlert(ALERT_LEAD_ADD_SUCCESS);
    return (<GlobalAlerts data={productAlertsMock} persist />);
};

export const ReviewSuccess = () => {
    addAlert(ALERT_REVIEW_ADD_SUCCESS);
    return (<GlobalAlerts data={productAlertsMock} persist />);
};

export const MultipleAlerts = () => {
    addAlert(ALERT_REVIEW_ADD_SUCCESS);
    addAlert(ALERT_QUESTION_ADD_ERROR);
    addAlert(ALERT_LEAD_ADD_SUCCESS);
    return (<GlobalAlerts data={productAlertsMock} persist />);
};

<Meta of={GlobalAlertStories} />

# GlobalAlerts

<br />

<h2>
  GlobalAlerts are used to notify users of the status of the submit reviews form, the questions form or lead form.
  Can only be used alongside the following components:

  <ul>
    <li>Product Review Form</li>
    <li>Product Question Form</li>
    <li>Product Lead Form</li>
  </ul>
</h2>

<br />

### Question success

<Canvas>
  <Story of={GlobalAlertStories.QuestionSuccessStory} />
</Canvas>

### Question error

<Canvas>
  <Story of={GlobalAlertStories.QuestionErrorStory} />
</Canvas>

### Lead success

<Canvas>
  <Story of={GlobalAlertStories.LeadSuccessStory} />
</Canvas>

### Review success

<Canvas>
  <Story of={GlobalAlertStories.ReviewSuccessStory} />
</Canvas>

### Multiple alerts

<Canvas>
  <Story of={GlobalAlertStories.MultipleAlertsStory} />
</Canvas>

## Props

<ArgsTable of={GlobalAlerts} />
