import React from 'react';
import { storiesOf } from '@storybook/react';
import PriceOverview from './index';
import { State, Store } from '@sambego/storybook-state';
import { t } from 'Framework/i18n';
import PriceList from '../PriceList';
import AddToCart from '../AddToBasket';
import ProductVariant from '../ProductVariant';
import AmountPrice from '../AmountPrice';
import ReceiveOfferForm from '../ReceiveOfferForm';
import Grid from '@material-ui/core/Grid';
import blueImg from '../ProductVariant/res/blau.jpg';
import greyIMG from '../ProductVariant/res/grau.jpg';
import redIMG from '../ProductVariant/res/rot.jpg';

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 amountData = [
    {
        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',
            },
        ],
    },
];

const amount = 0;
const componentRef = React.createRef();
const store = new Store({
    note: '100',
    focusedInput: false,
    notice: 'Bitte wie immer produzieren',
    priceData: mockedPriceData,
});

storiesOf('PriceOverview', module).add('with checkboxes', () => (
    <State store={store}>
        {() => (
            <Grid item xs={12} md={12}>
                <PriceOverview
                    title={t('amountPrice.priceOverview')}
                    amount={amount}
                    priceListComponent={
                        <PriceList
                            amount={amount}
                            list={mockedPriceData}
                            totalPrice="9,89 €"
                            taxNote={t('amountPrice.vatNotice')}
                            showReceiveOfferForm={true}
                            productTitle={t('mockedData.Premium_Kapuzenjacke')}
                        />
                    }
                    productVariantComponent={
                        <ProductVariant
                            header={t('amountPrice.productVariants')}
                            amountData={amountData}
                            buttonLabel={t('mockedData.selectSize')}
                            amountLabel={t('amountPrice.amount')}
                        />
                    }
                    addToCartComponent={
                        <AddToCart
                            note={store.notice}
                            noteLabel={t('amountPrice.notice')}
                            buttonLabel={t('receiveOfferForm.sendButton')}
                            totalPrice="9,89 €"
                            taxNote={t('amountPrice.vatNotice')}
                            amount={amount}
                            showReceiveOfferForm={true}
                        />
                    }
                    amountComponent={<AmountPrice amount={100} priceFormatted="500,00 €" />}
                    receiveOfferFormComponent={
                        <ReceiveOfferForm displayApproval={true} innerRef={componentRef} />
                    }
                />
            </Grid>
        )}
    </State>
));
