import React from 'react';
import { storiesOf } from '@storybook/react';
import { State, Store } from '@sambego/storybook-state';

import AmountPrice from './index';
import ConfigurationModeSwitch from '../../../Screens/Configurator/Components/ConfigurationModeSwitch';

const mockedPriceData = [
    {
        key: 'Damen Polo Organic, JAMES & NICHOLSON',
        identifier: 'precosts',
        label: 'Damen Polo Organic, JAMES & NICHOLSON',
        selectable: false,
        price: '98,00 €',
    },
    {
        key: 'Vorkosten',
        identifier: 'precosts',
        label: 'Vorkosten',
        selectable: false,
        price: '29,00 €',
    },
    {
        key: 'Werbedruck',
        identifier: 'advertisePrinting',
        label: 'Werbedruck',
        selectable: false,
        price: '42,00 €',
    },
    {
        key: 'Logokosten',
        identifier: 'logisticsCosts',
        label: 'Logokosten',
        selectable: false,
        price: '0,00 €',
    },
    {
        key: 'Korrekturanzug',
        identifier: 'proof',
        label: 'Korrekturabzug',
        selectable: true,
        price: '0,00 €',
    },
    {
        key: 'Korrekturmuster',
        identifier: 'correctionDraft',
        label: 'Korrekturmuster',
        selectable: true,
        price: '0,00 €',
    },
];

const store = new Store({
    amount: 100,
});

function handleChange(event) {
    store.set({ amount: +event.target.value });
}

storiesOf('AmountPrice', module)
    .add('boxed', () => (
        <State store={store}>
            {state => (
                <AmountPrice
                    amount={state.amount}
                    boxed={true}
                    priceFormatted="500,00 €"
                    vatNotice="VAT included plus shipping"
                    priceList={mockedPriceData}
                    onChangeAmount={handleChange}
                />
            )}
        </State>
    ))
    .add('not boxed', () => (
        <State store={store}>
            {state => (
                <AmountPrice
                    amount={state.amount}
                    boxed={false}
                    priceFormatted="500,00 €"
                    vatNotice="VAT included plus shipping"
                    priceList={mockedPriceData}
                    onChangeAmount={handleChange}
                />
            )}
        </State>
    ))
    .add('with configuration mode switch', () => (
        <State store={store}>
            {state => (
                <AmountPrice
                    amount={state.amount}
                    boxed={true}
                    priceFormatted="500,00 €"
                    vatNotice="VAT included plus shipping"
                    priceList={mockedPriceData}
                    onChangeAmount={handleChange}
                    showConfigurationModeSwitch
                    ConfigurationModeSwitchComponent={props => (
                        <ConfigurationModeSwitch
                            onChange={mode => alert(mode)}
                            configurationModeOptions={['designer']}
                            {...props}
                        />
                    )}
                />
            )}
        </State>
    ));
