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

const initialState = {
    optionclassifications: [
        {
            identifier: 'seat',
            title: 'Seat',
        },
        {
            identifier: 'back',
            title: 'Back',
        },
        {
            identifier: 'base',
            title: 'Base',
        },
        {
            identifier: 'pillow',
            title: 'Pillow',
        },
    ],
};

const reducer = (state = {}, action) => {
    return {
        ...action,
        ...state,
    };
};
const store = createStore(reducer, ['Use Redux']);

const firstStory = state => (
    <ProductPartsList
        optionclassifications={state.optionclassifications}
        useCarousel={false}
        CallToActionComponent={() => null}
    />
);

const secondStory = state => (
    <ProductPartsList
        optionclassifications={state.optionclassifications}
        vertical={false}
        useCarousel={false}
        CallToActionComponent={() => null}
    />
);

const thirdStory = state => (
    <ProductPartsList
        optionclassifications={state.optionclassifications}
        CallToActionComponent={() => null}
    />
);

const fourthStory = state => (
    <ProductPartsList
        optionclassifications={state.optionclassifications}
        vertical={false}
        CallToActionComponent={() => null}
    />
);

const createStory = (state, renderStory) => {
    return (
        <Provider store={store}>
            <DefaultThemeProvider>{renderStory(state)}</DefaultThemeProvider>
        </Provider>
    );
};

storiesOf('ProductPartsList', module)
    .add('showing vertical list', () => createStory(initialState, firstStory))
    .add('showing horizontal list', () => createStory(initialState, secondStory))
    .add('showing vertical list with Carousel', () => createStory(initialState, thirdStory))
    .add('showing horizontal list with Carousel', () => createStory(initialState, fourthStory));
