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

storiesOf('OptionDetail', module)
    .add('renders as fullscreen on small screens', () => (
        <Provider store={createStore((state = {}) => state)}>
            <DefaultThemeProvider>
                <OptionDetail {...{ ...mockedProps, width: 'sm' }} />
            </DefaultThemeProvider>
        </Provider>
    ))
    .add('renders as a modal on larger screens', () => (
        <Provider store={createStore((state = {}) => state)}>
            <DefaultThemeProvider>
                <OptionDetail {...{ ...mockedProps, width: 'md' }} />
            </DefaultThemeProvider>
        </Provider>
    ))
    .add('renders with previous and next navigation', () => (
        <Provider store={createStore((state = {}) => state)}>
            <DefaultThemeProvider>
                <OptionDetail {...{ ...mockedProps, options: [{}, {}] }} />
            </DefaultThemeProvider>
        </Provider>
    ))
    .add(
        'renders the provided loading component with the same size as the previous screen after navigating to another tile',
        () => (
            <Provider store={createStore((state = {}) => state)}>
                <DefaultThemeProvider>
                    <OptionDetail
                        {...{
                            ...mockedProps,
                            options: [{}, {}],
                            LoadingComponent: () => null,
                        }}
                    />
                </DefaultThemeProvider>
            </Provider>
        )
    );
