import React, { ReactText, useState }                         from 'react';
import { text, withKnobs }                                    from '@storybook/addon-knobs';
import { AnimatedWrapper, Description, Icon, Title, Wrapper } from '../../..';
import { cn }                                                 from '../../util/bem';
import './animated-wrapper.component.scss';

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


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 _Animated = () => {
    const [ id, setId ] = useState(1);
    const content: Record<ReactText, React.ReactNode> = {
        1: (
            <Wrapper onClick={ () => setId(2) }>
                <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>
        ),
        2: (<Wrapper onClick={ () => setId(1) }>Текст</Wrapper>)
    };
    return (
        <AnimatedWrapper
            className={ className() }
            // align="center"
            // color="dark"
            // frame="solid-shadow-xl"
            // padding="xxl"
            // maxWidth="500px"
        >
            { content[ id ] }
        </AnimatedWrapper>
    );
};