import { Meta, Story, Canvas } from '@storybook/addon-docs/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';

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 title="Components/Global Alert" component={GlobalAlerts} />

# 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 name="Question success" inline={false}>
        <QuestionSuccess />
    </Story>
</Canvas>

### Question error
<Canvas>
    <Story name="Question error" inline={false}>
        <QuestionError />
    </Story>
</Canvas>

### Lead success
<Canvas>
    <Story name="Lead success" inline={false}>
        <LeadSuccess />
    </Story>
</Canvas>

### Review success
<Canvas>
    <Story name="Review success" inline={false}>
        <ReviewSuccess />
    </Story>
</Canvas>

### Multiple alerts
<Canvas>
    <Story name="Multiple alerts" inline={false} height="250px">
        <MultipleAlerts />
    </Story>
</Canvas>
