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

const hierarchicalMockData = [
    {
        identifier: 'Auf_Schaft_vorne',
        title: 'Auf Schaft vorne',
        productionMethods: [
            {
                identifier: 'Tampondruck',
                title: 'Tampondruck (bis zu 4-farbig)',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                ],
            },
            {
                identifier: 'Offsetdruck',
                title: 'Offsetdruck ',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                ],
            },
            {
                identifier: 'Rollen-Offset',
                title: 'Rollen-Offset',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                ],
            },
            {
                identifier: 'Siebdruck',
                title: 'Siebdruck',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                ],
            },
        ],
    },
    {
        identifier: 'Auf_Schaft_hinten',
        title: 'Auf Schaft hinten',
        productionMethods: [
            {
                identifier: 'Tampondruck',
                title: 'Tampondruck (bis zu 4-farbig)',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                ],
            },
            {
                identifier: 'Offsetdruck',
                title: 'Offsetdruck ',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                ],
            },
            {
                identifier: 'Rollen-Offset',
                title: 'Rollen-Offset',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                ],
            },
            {
                identifier: 'Siebdruck',
                title: 'Siebdruck',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                ],
            },
        ],
    },
    {
        identifier: 'ganze_flaeche',
        title: 'ganze Fläche',
        productionMethods: [
            {
                identifier: 'Tampondruck',
                title: 'Tampondruck (bis zu 4-farbig)',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                    {
                        identifier: '3_farbe',
                        title: '3 Farben',
                    },
                ],
            },
            {
                identifier: 'Offsetdruck',
                title: 'Offsetdruck ',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                    {
                        identifier: '3_farbe',
                        title: '3 Farben',
                    },
                ],
            },
            {
                identifier: 'Rollen-Offset',
                title: 'Rollen-Offset',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                    {
                        identifier: '3_farbe',
                        title: '3 Farben',
                    },
                ],
            },
            {
                identifier: 'Siebdruck',
                title: 'Siebdruck',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                    {
                        identifier: '3_farbe',
                        title: '3 Farben',
                    },
                ],
            },
        ],
    },
    {
        identifier: 'Auf_Clip',
        title: 'Auf Clip',
        productionMethods: [
            {
                identifier: 'Tampondruck',
                title: 'Tampondruck (bis zu 4-farbig)',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                    {
                        identifier: '3_farbe',
                        title: '3 Farben',
                    },
                    {
                        identifier: '4_farbe',
                        title: '4 Farben',
                    },
                ],
            },
            {
                identifier: 'Offsetdruck',
                title: 'Offsetdruck ',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                    {
                        identifier: '3_farbe',
                        title: '3 Farben',
                    },
                    {
                        identifier: '4_farbe',
                        title: '4 Farben',
                    },
                ],
            },
            {
                identifier: 'Rollen-Offset',
                title: 'Rollen-Offset',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                    {
                        identifier: '3_farbe',
                        title: '3 Farben',
                    },
                    {
                        identifier: '4_farbe',
                        title: '4 Farben',
                    },
                ],
            },
            {
                identifier: 'Siebdruck',
                title: 'Siebdruck',
                coloramount: [
                    {
                        identifier: '1_farbe',
                        title: '1 Farbe',
                    },
                    {
                        identifier: '2_farbe',
                        title: '2 Farben',
                    },
                    {
                        identifier: '3_farbe',
                        title: '3 Farben',
                    },
                    {
                        identifier: '4_farbe',
                        title: '4 Farben',
                    },
                ],
            },
        ],
    },
];

const store = new Store({
    valueDesignArea: {
        identifier: 'Auf Schaft vorne',
        title: 'Auf Schaft vorne',
    },
    valueProductionMethod: {
        identifier: 'Tampondruck (bis zu 4-farbig)',
        title: 'Tampondruck (bis zu 4-farbig)',
    },
});

function handleChangeDesignArea(event) {
    store.set({
        valueDesignArea: { identifier: event.target.value },
    });
}

function handleChangeProductionMethod(event) {
    store.set({
        valueProductionMethod: { identifier: event.target.value },
    });
}

storiesOf('DesignAreaControlbox', module)
    .add('boxed component', () => (
        <State store={store}>
            {state => (
                <DesignAreaControlbox
                    boxed
                    designAreas={hierarchicalMockData}
                    designedAreas={{ a_1: true }}
                    valueProductionMethod={state.valueProductionMethod.identifier}
                    valueDesignArea={state.valueDesignArea.identifier}
                    handleChangeDesignArea={handleChangeDesignArea}
                    handleChangeProductionMethod={handleChangeProductionMethod}
                />
            )}
        </State>
    ))
    .add('unboxed component', () => (
        <State store={store}>
            {state => (
                <DesignAreaControlbox
                    designAreas={hierarchicalMockData}
                    designedAreas={{ a_1: true }}
                    valueProductionMethod={state.valueProductionMethod.identifier}
                    valueDesignArea={state.valueDesignArea.identifier}
                    handleChangeDesignArea={handleChangeDesignArea}
                    handleChangeProductionMethod={handleChangeProductionMethod}
                />
            )}
        </State>
    ));
