import React from 'react';
import { storiesOf } from '@storybook/react';
import { State, Store } from '@sambego/storybook-state';
import { t } from 'Framework/i18n';
import VariantChooser from './index';
import blueImg from './res/blue.jpg';
import greenIMG from './res/green.jpg';
import whiteIMG from './res/white.jpg';
import redIMG from './res/red.jpg';
import blackIMG from './res/black.jpg';

const mockData = [
    {
        key: 'green',
        title: 'Light Softshell Green',
        value: 'green',
        url: greenIMG,
    },
    {
        key: 'white ',
        title: 'Weiße Premium Kapuzenjacke zur Weihnacht',
        value: 'white',
        url: whiteIMG,
    },
    {
        key: 'black',
        title: 'Schwarze Kapuzenjacke nach Weihnachten',
        value: 'black',
        url: blackIMG,
    },
    {
        key: 'red',
        title: 'Rote Premium Kapuzenjacke',
        value: 'red',
        url: redIMG,
    },
    {
        key: 'blue',
        title: 'Blau Premium Kapuzenjacke',
        value: 'blue',
        url: blueImg,
    },
    {
        key: 'blue1',
        title: 'Blaue Premium Kapuzenjacke zur Weihnacht',
        value: 'blue1',
        url: blueImg,
    },
    {
        key: 'blue2',
        title: 'Weiße Premium Jacke',
        value: 'blue2',
        url: blueImg,
    },
];

const mockOneVariantData = [
    {
        key: 'white ',
        title: 'Premium Kapuzenjacke zur Weihnacht',
        value: 'white',
        url: whiteIMG,
    },
];

const store = new Store({
    name: 'Light Softshell Green',
});

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

storiesOf('VariantChooser', module)
    .add('multiple variants', () => (
        <State store={store}>
            {state => (
                <VariantChooser
                    variants={mockData}
                    value={state.name}
                    item={t('mockedData.Premium_Kapuzenjacke')}
                    orderNr="309575"
                    handleChange={handleChange}
                />
            )}
        </State>
    ))
    .add('one variant', () => (
        <State store={store}>
            {() => (
                <VariantChooser
                    variants={mockOneVariantData}
                    value={'Premium Kapuzenjacke zur Weihnacht'}
                    item={t('mockedData.Premium_Kapuzenjacke')}
                    orderNr="309575"
                />
            )}
        </State>
    ));
