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

const initialState = {
    availableOption: {
        identifier: '010002011000',
        imageIdentifier: '010002011000',
        title: 'Argentina 1000',
        priceFormatted: '€ 123.00',
        amount_is_selectable: false,
        check_results: {
            status: true,
        },
    },
    unavailableOption: {
        identifier: '010002011000',
        imageIdentifier: '',
        title: 'Argentina 1000',
        priceFormatted: '€ 123.00',
        amount_is_selectable: false,
        check_results: {
            status: true,
        },
    },
    optionWithSelectableAmount: {
        identifier: '010002011000',
        imageIdentifier: '',
        title: 'Argentina 1000',
        priceFormatted: '€ 123.00',
        amount_is_selectable: true,
        check_results: {
            status: true,
        },
    },
    optionWithDetails: {
        identifier: '010002011000',
        imageIdentifier: '',
        title: 'Argentina 1000',
        priceFormatted: '€ 123.00',
        abstract: 'abstract',
        amount_is_selectable: false,
        check_results: {
            status: true,
        },
    },
    incompatibleOption: {
        identifier: '010002011000',
        imageIdentifier: '',
        title: 'Argentina 1000',
        priceFormatted: '€ 123.00',
        abstract: 'abstract',
        amount_is_selectable: false,
    },
    optionNotInStock: {
        identifier: '010002011000',
        imageIdentifier: '',
        title: 'Argentina 1000',
        priceFormatted: '€ 123.00',
        stock: {
            traffic_light: 'red',
        },
    },
    optionWithDelay: {
        identifier: '010002011000',
        imageIdentifier: '',
        title: 'Argentina 1000',
        priceFormatted: '€ 123.00',
        stock: {
            traffic_light: 'yellow',
        },
    },
    optionWithOptionGroup: {
        identifier: '010002011000',
        imageIdentifier: '',
        title: 'Argentina 1000',
        priceFormatted: '€ 123.00',
        option_group: {
            children: [
                { identifier: '1', title: 'Child 1' },
                { identifier: '2', title: 'Child 2' },
            ],
            title: 'My group',
        },
    },
    translations: {
        imageNotAvailable: 'No preview available',
        details: 'Details',
        incompatibility: 'Incompatibility',
        notAvailable: 'Not avaiable',
        lateDelivery: 'Late delivery',
    },
};

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

const createStory = option => {
    return (
        <Provider store={store}>
            <DefaultThemeProvider>
                <div style={{ backgroundColor: 'lightblue', width: '350px' }}>
                    <Option option={option} translations={initialState.translations} />
                </div>
            </DefaultThemeProvider>
        </Provider>
    );
};

storiesOf('Option', module)
    .add('with available image', () => createStory(initialState.availableOption))
    .add('with unavailable image', () => createStory(initialState.unavailableOption))
    .add('with selectable amount', () => createStory(initialState.optionWithSelectableAmount))
    .add('with details', () => createStory(initialState.optionWithDetails))
    .add('with incompatibility link', () => createStory(initialState.incompatibleOption))
    .add('with stock - not available', () => createStory(initialState.optionNotInStock))
    .add('with stock - late delivery', () => createStory(initialState.optionWithDelay))
    .add('with option group', () => createStory(initialState.optionWithOptionGroup));
