import React from 'react';
import { storiesOf } from '@storybook/react';
import PriceList from './index';
import { Store, State } from '@sambego/storybook-state';
import { t } from 'Framework/i18n';

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: 'Korrekturabzug',
        identifier: 'proof',
        label: 'Korrekturabzug',
        selectable: true,
        selected: false,
        price: '0,00 €',
    },
    {
        key: 'Korrekturmuster',
        identifier: 'correctionDraft',
        label: 'Korrekturmuster',
        selectable: true,
        selected: false,
        price: '0,00 €',
    },
];

const mockedPriceDataWithoutSelectable = [
    {
        key: 'Damen Polo Organic, JAMES & NICHOLSON',
        identifier: 'precosts',
        label: 'Damen Polo Organic, JAMES & NICHOLSON',
        selectable: false,
        price: '98,00 €',
    },
    {
        key: 'Korrekturmuster',
        identifier: 'correctionDraft',
        label: 'Korrekturmuster',
        selectable: false,
        price: '0,00 €',
    },
];

const store = new Store({
    priceData: mockedPriceData,
});

const onSelectableChanged = priceData => (key, newSelected) => {
    const nextData = priceData.map(currentElement => {
        if (currentElement.key === key) {
            return { ...currentElement, selected: newSelected, price: newSelected ? '10,00 €' : '0,00 €' };
        }
        return currentElement;
    });
    store.set({ priceData: nextData });
};

storiesOf('PriceList', module)
    .add('with checkboxes', () => (
        <State store={store}>
            {state => (
                <PriceList
                    amount="100"
                    list={state.priceData}
                    currentTotalPrice="500,00 €"
                    taxNote={t('amountPrice.vatNotice')}
                    onSelectableChanged={onSelectableChanged(state.priceData)}
                />
            )}
        </State>
    ))
    .add('without checkboxes', () => (
        <PriceList
            list={mockedPriceDataWithoutSelectable}
            amount="100"
            currentTotalPrice="500,00 €"
            taxNote={t('amountPrice.vatNotice')}
        />
    ));
