import React from 'react';
import { storiesOf } from '@storybook/react';
import DefaultThemeProvider from 'App/Screens/Configurator/ThemeProvider';
import MessageBox from './index';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore((state = {}) => state);

storiesOf('Messagebox', module)
    .add('renders with a success message', () => (
        <Provider store={store}>
            <DefaultThemeProvider>
                <MessageBox type="success" text="I am a nice success message" />
            </DefaultThemeProvider>
        </Provider>
    ))
    .add('renders with a warning message', () => (
        <Provider store={store}>
            <DefaultThemeProvider>
                <MessageBox type="warning" text="I am a nice warning message" />
            </DefaultThemeProvider>
        </Provider>
    ))
    .add('renders with a error message', () => (
        <Provider store={store}>
            <DefaultThemeProvider>
                <MessageBox type="error" text="I am a nice error message" />
            </DefaultThemeProvider>
        </Provider>
    ))
    .add('renders with a message with long title', () => (
        <Provider store={store}>
            <DefaultThemeProvider>
                <MessageBox
                    type="success"
                    text="I am a nice success message with a title that will wrap into more than one line, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad asperiores dolorum eligendi est necessitatibus odio pariatur praesentium quae saepe voluptatum."
                />
            </DefaultThemeProvider>
        </Provider>
    ));
