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 ProductPart from './index';

const initialState = {
    displaySwitchedOptions: false,
    optionclassification: {
        identifier: 'seat',
        title: 'Seat',
    },
    selectedOption: {
        identifier: 'seat',
    },
    selectedOption2: {
        identifier: 'back',
    },
    onSelect: () => {},
};

const stories = {
    withoutMarker: {
        displaySwitchedOptions: initialState.displaySwitchedOptions,
        optionclassification: initialState.optionclassification,
        selectedOption: initialState.selectedOption2,
        onSelect: initialState.onSelect,
    },
    withVerticalMarker: {
        displaySwitchedOptions: initialState.displaySwitchedOptions,
        optionclassification: initialState.optionclassification,
        selectedOption: initialState.selectedOption,
        onSelect: initialState.onSelect,
    },
    withHorizontalMarker: {
        displaySwitchedOptions: initialState.displaySwitchedOptions,
        optionclassification: initialState.optionclassification,
        selectedOption: initialState.selectedOption,
        onSelect: initialState.onSelect,
        verticalMode: false,
    },
};

const customTheme = {
    palette: {
        primary: {
            main: '#FF0000',
        },
    },
};

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

const createStory = data => {
    return (
        <Provider store={store}>
            <DefaultThemeProvider customTheme={customTheme}>
                <ProductPart {...data} />
            </DefaultThemeProvider>
        </Provider>
    );
};

storiesOf('ProductPart', module)
    .add('without marker', () => createStory(stories.withoutMarker))
    .add('vertical mode', () => createStory(stories.withVerticalMarker))
    .add('horizontal mode', () => createStory(stories.withHorizontalMarker));
