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

const mockedFontsList = [
    {
        identifier: 'Calibri',
        title: 'Calibri',
        value: 'Calibri',
    },
    {
        identifier: 'Arial',
        title: 'Arial',
        value: 'Arial',
    },
    {
        identifier: 'Helvetica',
        title: 'Helvetica',
        value: 'Helvetica',
    },
    {
        identifier: 'Times New Roman',
        title: 'Times New Roman',
        value: 'Times New Roman',
    },
    {
        identifier: 'Roboto',
        title: 'Roboto',
        value: 'Roboto',
    },
    {
        identifier: 'Verdana',
        title: 'Verdana',
        value: 'Verdana',
    },
];

const store = new Store({
    textValue: 'Lorem ipsum dolor sit amet, cosectetur adipiscing elit',
    fontValue: 'Calibri',
    fontSizeValue: 10,
});

function incrementFontSize(max) {
    if (store.state.fontSizeValue < max) {
        store.set({
            fontSizeValue: store.state.fontSizeValue + 1,
        });
    }
}

function decrementFontSize(min) {
    if (store.state.fontSizeValue > min) {
        store.set({
            fontSizeValue: store.state.fontSizeValue - 1,
        });
    }
}

function handleChangeFont(event) {
    store.set({
        fontValue: event.target.value,
    });
}

function handleChangeText(event) {
    store.set({
        textValue: event.target.value,
    });
}

storiesOf('TextControlbox', module)
    .add('boxed component', () => (
        <State store={store}>
            {state => [
                <TextControlbox
                    boxed
                    textValue={state.textValue}
                    handleChangeText={handleChangeText}
                    fontValue={state.fontValue}
                    fonts={mockedFontsList}
                    handleChangeFont={handleChangeFont}
                    minSize={8}
                    maxSize={12}
                    fontSizeValue={state.fontSizeValue}
                    key={state.textValue}
                    incrementFontSize={incrementFontSize}
                    decrementFontSize={decrementFontSize}
                />,
            ]}
        </State>
    ))
    .add('unboxed component', () => (
        <State store={store}>
            {state => [
                <TextControlbox
                    textValue={state.textValue}
                    handleChangeText={handleChangeText}
                    fontValue={state.fontValue}
                    fonts={mockedFontsList}
                    handleChangeFont={handleChangeFont}
                    minSize={8}
                    maxSize={12}
                    fontSizeValue={state.fontSizeValue}
                    key={state.fontValue}
                    incrementFontSize={incrementFontSize}
                    decrementFontSize={decrementFontSize}
                />,
            ]}
        </State>
    ));
