import React                                       from 'react';
import { boolean, optionsKnob, text, withKnobs }   from '@storybook/addon-knobs';
import { Description, Icon, MediaProvider, Title } from '../../..';
import { cn }                                      from '../../util/bem';
import { sizes, textColors }                       from '../../util/global-props';
import { OptionsKnobRecord }                       from '../../util/knobs';
import { Wrapper, WrapperPropsType }               from './wrapper.component';

export default {
    title:      'GEENEE-UI/Wrapper',
    component:  Wrapper,
    decorators: [ withKnobs ]
};

// @ts-ignore
const wrapperAlign: OptionsKnobRecord<WrapperPropsType['align']> = {
    default: undefined,
    center:  'center',
    right:   'right',
    left:    'left',
    stretch: 'stretch'
};
const wrapperColor: OptionsKnobRecord<WrapperPropsType['color']> = {
    default: undefined,
    ...textColors
};
// @ts-ignore
const wrapperFrame: OptionsKnobRecord<WrapperPropsType['frame']> = {
    default:                   undefined,
    'solid-grey':              'solid-grey',
    'solid-grey-1':            'solid-grey-1',
    'solid-bg':                'solid-bg',
    'solid-key':               'solid-key',
    'solid-white':             'solid-white',
    'solid-key-translucent':   'solid-key-translucent',
    'solid-red-translucent':   'solid-red-translucent',
    'solid-green-translucent': 'solid-green-translucent',
    'solid-dark':              'solid-dark',
    'border-gray':             'border-gray',
    'border-2-gray':           'border-2-gray',
    'border-key':              'border-key',
    'border-2-key':            'border-2-key',
    'solid-shadow-xl':         'solid-shadow-xl'
};
const wrapperMaxWidth: OptionsKnobRecord<WrapperPropsType['maxWidth']> = {
    default: undefined,
    '50%':   '50%',
    '500px': '500px'
};
const wrapperPadding: OptionsKnobRecord<WrapperPropsType['padding']> = {
    default: undefined,
    ...sizes

};
const titleDefault = 'Hassle-free time tracking';

// eslint-disable-next-line max-len
const descriptionDefault = 'Toggl makes time tracking so simple you’ll actually use it. But even if you forget, our tracking reminders and idle detection have your back';

const className = cn('test-component');

export const Playground = () => (
    <Wrapper
        className={ className() }
        align={ optionsKnob('01. Align', wrapperAlign, undefined, { display: 'select' }) }
        color={ optionsKnob('02. Color', wrapperColor, undefined, { display: 'select' }) }
        frame={ optionsKnob('03. Frame', wrapperFrame, undefined, { display: 'select' }) }
        padding={ optionsKnob('04. Padding', wrapperPadding, undefined, { display: 'select' }) }
        maxWidth={ optionsKnob('05. Max width', wrapperMaxWidth, '500px', { display: 'select' }) }
        row={ boolean('06. Row direction', false) }
    >
        <Icon name="check" frame="opacity" size={ 56 } color="key" margin="sm" />
        <Title size="xl" margin="sm">
            { text('Title text', titleDefault) }
        </Title>
        <Description margin="md">{ text('Description Text', descriptionDefault) }</Description>
        <Wrapper frame="solid-grey" padding="md" row>
            <Icon name="check" frame="opacity" size={ 24 } margin="sm" />
            <Wrapper>
                <Title>
                    { text('Title text', titleDefault) }
                </Title>
                <Description>{ text('Description Text', descriptionDefault) }</Description>
            </Wrapper>
        </Wrapper>
    </Wrapper>
);
export const Playground2 = () => (
    <MediaProvider>
        <Wrapper
            className={ className() }
            align={ optionsKnob('01. Align', wrapperAlign, undefined, { display: 'select' }) }
            color={ optionsKnob('02. Color', wrapperColor, undefined, { display: 'select' }) }
            md={ { frame: 'solid-dark' } }
            frame={ optionsKnob('03. Frame', wrapperFrame, undefined, { display: 'select' }) }
            padding={ optionsKnob('04. Padding', wrapperPadding, undefined, { display: 'select' }) }
            maxWidth={ optionsKnob('05. Max width', wrapperMaxWidth, '500px', { display: 'select' }) }
            row={ boolean('06. Row direction', false) }
        >

            <Icon name="check" frame="opacity" size={ 24 } margin="sm" />
            <Wrapper>
                <Title margin="xxs">
                    { text('Title text', titleDefault) }
                </Title>
                <Description margin="md">{ text('Description Text', descriptionDefault) }</Description>
                <Wrapper row>
                    <Icon name="lockOpen" margin="xs" />
                    <Description>Lock open</Description>
                </Wrapper>
            </Wrapper>
        </Wrapper>
    </MediaProvider>
);

export const Usecases = () => (
    <Wrapper>
        <Description size="xs" color="grey-6" margin="md" uppercase>Redgular vertical</Description>
        <Wrapper margin="md">
            <Title size="xl" margin="md">
                { text('Title text', titleDefault) }
            </Title>
            <Description>{ text('Description Text', descriptionDefault) }</Description>
        </Wrapper>

        <Description size="xs" color="grey-6" uppercase margin="md">Callout grey</Description>
        <Wrapper frame="solid-grey" padding="sm" maxWidth="500px" margin="md">
            <Title size="md" margin="md">
                { text('Title text', titleDefault) }
            </Title>
            <Description>{ text('Description Text', descriptionDefault) }</Description>
        </Wrapper>
    </Wrapper>
);