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

const mockedDesignAreas = [
    {
        name: 'Auf Schaft',
        identifier: 'auf_schaft',
    },
    {
        name: 'Auf Clip',
        identifier: 'auf_clip',
    },
    {
        name: 'Auf Schaft Rückseite',
        identifier: 'auf_schaft_rueckseite',
    },
    {
        name: 'Druckknopf',
        identifier: 'druckknopf',
    },
];

const mockedCalculationData = [
    {
        key: '100 x ' + t('mockedData.demoPen'),
        identifier: 'costs',
        label: t('mockedData.demoPen'),
        selectable: false,
        price: '50,00 €',
    },
    {
        key: 'Grundkosten',
        identifier: 'basiccosts',
        label: t('mockedData.basicCosts'),
        selectable: false,
        price: '29,00 €',
    },
    {
        key: 'Druckkosten',
        identifier: 'printcosts',
        label: t('mockedData.printingCosts'),
        selectable: false,
        price: '44,00 €',
    },
    {
        key: 'Profi-Datencheck',
        identifier: 'datacheck',
        label: t('mockedData.professionalCheck'),
        selectable: true,
        selectet: false,
        price: '10,00 €',
    },
];

const designProductionList = [
    {
        name: t('mockedData.print'),
        identifier: 'Druck',
    },
    {
        name: t('mockedData.embossing'),
        identifier: 'Prägung',
    },
    {
        name: t('mockedData.engraving'),
        identifier: 'Gravur',
    },
];

const selectedColorAmountList = [
    {
        name: '1 ' + t('mockedData.color'),
        identifier: '1 farbig',
    },
    {
        name: '2 ' + t('mockedData.colors'),
        identifier: '2 farbig',
    },
    {
        name: '3 ' + t('mockedData.colors'),
        identifier: '3 farbig',
    },
];

const store = new Store({
    amount: '100',
    priceData: 'mockedCalculationData',
    mockedCalculationData: mockedCalculationData,
    designProductionList: designProductionList,
    selectedColorAmountList: selectedColorAmountList,
    selectedColorAmount: '1 farbig',
    designProduction: 'Druck',
});

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

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

function handleChangeDesignProductionMethod(event) {
    store.set({ designProduction: event.target.value });
}

function handleChangeSelectedColorAmount(event) {
    store.set({ selectedColorAmount: event.target.value });
}

storiesOf('CalculationWidget', module).add('designCalculationScreen', () => (
    <State store={store}>
        {state => (
            <CalculationWidget
                colorAmountList={state.selectedColorAmountList}
                currentSelectedColorAmount={state.selectedColorAmount}
                designProductionMethods={state.designProductionList}
                currentDesignProductionMethod={state.designProduction}
                handleChangeDesignProductionMethod={handleChangeDesignProductionMethod}
                handleChangeSelectedColorAmount={handleChangeSelectedColorAmount}
                designAreas={mockedDesignAreas}
                amountValue={state.amount}
                onChangeAmount={handleChangeAmount}
                calculationData={state.mockedCalculationData}
                onSelectableChanged={onSelectableChanged(state.mockedCalculationData)}
                totalPrice={'123,00 €'}
                priceListComponent={
                    <PriceList
                        amount={state.amount}
                        list={state.mockedCalculationData}
                        totalPrice={'123,00€'}
                        taxNote={t('amountPrice.vatNotice')}
                        onSelectableChanged={onSelectableChanged(state.mockedCalculationData)}
                    />
                }
            />
        )}
    </State>
));
