import React from 'react';
import { storiesOf } from '@storybook/react';
import ProductVariant from './index';
import { State, Store } from '@sambego/storybook-state';
import { t } from 'Framework/i18n';
import blueImg from './res/blau.jpg';
import greyIMG from './res/grau.jpg';
import redIMG from './res/rot.jpg';
import blackIMG from './res/schwarz.jpg';

const mockedAmountInputData = [
    {
        url: blueImg,
        title: t('mockedData.blue'),
        isSizeButtonClosed: false,
        sizes: [
            {
                size: 'S',
                amount: 100,
                label: 'S',
                key: 'S',
            },
            {
                size: 'M',
                amount: '',
                label: 'M',
                key: 'M',
            },
            {
                size: 'L',
                amount: '',
                label: 'L',
                key: 'L',
            },
            {
                size: 'XL',
                amount: '',
                label: 'XL',
                key: 'XL',
            },
            {
                size: 'XXL',
                amount: '',
                label: 'XXL',
                key: 'XXL',
            },
        ],
    },
    {
        url: greyIMG,
        title: t('mockedData.gray'),
        isSizeButtonClosed: false,
        sizes: [
            {
                size: 'S',
                amount: 100,
                label: 'S',
                key: 'S',
            },
            {
                size: 'M',
                amount: '',
                label: 'M',
                key: 'M',
            },
            {
                size: 'L',
                amount: '',
                label: 'L',
                key: 'L',
            },
            {
                size: 'XL',
                amount: '',
                label: 'XL',
                key: 'XL',
            },
            {
                size: 'XXL',
                amount: '',
                label: 'XXL',
                key: 'XXL',
            },
        ],
    },
    {
        url: redIMG,
        title: t('mockedData.red'),
        isSizeButtonClosed: false,
        sizes: [
            {
                size: 'S',
                amount: 100,
                label: 'S',
                key: 'S',
            },
            {
                size: 'M',
                amount: '',
                label: 'M',
                key: 'M',
            },
            {
                size: 'L',
                amount: '',
                label: 'L',
                key: 'L',
            },
            {
                size: 'XL',
                amount: '',
                label: 'XL',
                key: 'XL',
            },
            {
                size: 'XXL',
                amount: '',
                label: 'XXL',
                key: 'XXL',
            },
        ],
    },
    {
        url: blackIMG,
        title: t('mockedData.black'),
        isSizeButtonClosed: false,
        sizes: [
            {
                size: 'S',
                amount: 100,
                label: 'S',
                key: 'S',
            },
            {
                size: 'M',
                amount: '',
                label: 'M',
                key: 'M',
            },
            {
                size: 'L',
                amount: '',
                label: 'L',
                key: 'L',
            },
            {
                size: 'XL',
                amount: '',
                label: 'XL',
                key: 'XL',
            },
            {
                size: 'XXL',
                amount: '',
                label: 'XXL',
                key: 'XXL',
            },
        ],
    },
    {
        url: blueImg,
        title: t('mockedData.blue') + '1',
        isSizeButtonClosed: false,
        sizes: [
            {
                size: 'S',
                amount: 100,
                label: 'S',
                key: 'S',
            },
            {
                size: 'M',
                amount: '',
                label: 'M',
                key: 'M',
            },
            {
                size: 'L',
                amount: '',
                label: 'L',
                key: 'L',
            },
            {
                size: 'XL',
                amount: '',
                label: 'XL',
                key: 'XL',
            },
            {
                size: 'XXL',
                amount: '',
                label: 'XXL',
                key: 'XXL',
            },
        ],
    },
];

const OneProductVariantData = [
    {
        url: blackIMG,
        title: t('mockedData.black'),
        isSizeButtonClosed: true,
        sizes: [
            {
                size: 'One',
                amount: 100,
                label: t('amountPrice.amount'),
                key: 'black',
            },
        ],
    },
    {
        url: redIMG,
        title: t('mockedData.red'),
        isSizeButtonClosed: true,
        sizes: [
            {
                size: 'One',
                amount: 100,
                label: t('amountPrice.amount'),
                key: 'red',
            },
        ],
    },
    {
        url: blueImg,
        title: t('mockedData.blue'),
        isSizeButtonClosed: true,
        sizes: [
            {
                size: 'One',
                amount: 100,
                label: t('amountPrice.amount'),
                key: 'blue',
            },
        ],
    },
];

const store = new Store({
    amountData: mockedAmountInputData,
});

const storeOneVariant = new Store({
    amountData: OneProductVariantData,
});

const handleChange = (store, state) => (variant, size, value) => {
    const nextData = state.amountData.map(currentVariant => {
        if (variant.title === currentVariant.title) {
            return {
                ...currentVariant,
                sizes: currentVariant.sizes.map(currentSize =>
                    size.key === currentSize.key ? { ...currentSize, amount: value } : currentSize
                ),
            };
        }
        return currentVariant;
    });
    store.set({ amountData: nextData });
};

const handleOpenSizeClick = amountData => (title, isSizeButtonClosed) => {
    const nextData = amountData.map(currentElement => {
        if (currentElement.title === title) {
            return { ...currentElement, isSizeButtonClosed: isSizeButtonClosed };
        } else {
            return { ...currentElement, isSizeButtonClosed: false };
        }
        //currentElement;
    });
    store.set({ amountData: nextData });
};

storiesOf('ProductVariant', module)
    .add('with label', () => (
        <State store={store}>
            {state => (
                <ProductVariant
                    header="Produktvarianten"
                    handleChange={handleChange(store, state)}
                    amountData={state.amountData}
                    buttonLabel={t('mockedData.selectSize')}
                    amountLabel={t('amountPrice.amount')}
                    handleOpenSizeClick={handleOpenSizeClick(state.amountData)}
                />
            )}
        </State>
    ))
    .add('with one variant', () => (
        <State store={storeOneVariant}>
            {state => (
                <ProductVariant
                    header="Produktvarianten"
                    handleChange={handleChange(storeOneVariant, state)}
                    amountData={state.amountData}
                    amountLabel={t('amountPrice.amount')}
                />
            )}
        </State>
    ));
