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

import greenIMG from 'App/Shared/Components/VariantChooser/res/green.jpg';
import whiteIMG from 'App/Shared/Components/VariantChooser/res/white.jpg';
import blackIMG from 'App/Shared/Components/VariantChooser/res/black.jpg';
import redIMG from 'App/Shared/Components/VariantChooser/res/red.jpg';
import blueImg from 'App/Shared/Components/VariantChooser/res/blue.jpg';

const mockVariantsData = [
    {
        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 mockIcons = [
    {
        key: 'save',
        identifier: 'save',
        title: t('headerMenu.save'),
    },
    {
        key: 'mail',
        identifier: 'mail',
        title: t('headerMenu.sendEmail'),
    },
    {
        key: 'picture_as_pdf',
        identifier: 'picture_as_pdf',
        title: t('headerMenu.saveAsPdf'),
    },
    {
        key: 'help',
        identifier: 'help',
        title: t('mockedData.help'),
    },
];

const mockedStepsData = [
    {
        key: 'variants',
        identifier: 'variants',
        title: t('mockedData.variant'),
        icon: 'brush',
    },
    {
        key: 'designer',
        identifier: 'designer',
        title: t('mockedData.configure'),
        icon: 'tune',
    },
];

const mockedStepData = [
    {
        key: 'variants',
        identifier: 'variants',
        title: t('mockedData.variant'),
        icon: 'brush',
    },
];

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

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

storiesOf('Header', module)
    .add('with two steps', () => (
        <State store={store}>
            {state => (
                <Header
                    tools={mockIcons}
                    steps={mockedStepsData}
                    variantChooser={mockVariantsData}
                    handleVariantChange={handleChange}
                    variantValue={state.name}
                    variantItem={t('mockedData.Premium_Kapuzenjacke')}
                />
            )}
        </State>
    ))
    .add('with only one step', () => (
        <State store={store}>
            {state => (
                <Header
                    tools={mockIcons}
                    steps={mockedStepData}
                    variantChooser={mockVariantsData}
                    handleVariantChange={handleChange}
                    variantValue={state.name}
                    variantItem={t('mockedData.Premium_Kapuzenjacke')}
                />
            )}
        </State>
    ))
    .add('without steps', () => (
        <State store={store}>
            {state => (
                <Header
                    icons={mockIcons}
                    variantChooser={mockVariantsData}
                    handleVariantChange={handleChange}
                    variantValue={state.name}
                    variantItem={t('mockedData.Premium_Kapuzenjacke')}
                />
            )}
        </State>
    ));
