import React from 'react';
import { number, text } from '@storybook/addon-knobs';
import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
import { AppBar, ThreeLiner } from '@brightlayer-ui/react-components';
import { makeStyles, Toolbar } from '@material-ui/core';

export const withDynamicContent = (): StoryFnReactReturnType => {
    const useStyles = makeStyles({
        title: {},
        subtitle: {},
        info: {},
        liner: {
            top: 0,
            position: 'relative',
        },
        expanded: {
            '& $liner': {
                top: 64,
            },
        },
        collapsed: {
            '& $title': {
                fontSize: '1.25rem',
                fontWeight: 600,
            },
            '& $subtitle': {
                fontSize: 0,
            },
            '& $info': {
                fontSize: '1rem',
                fontWeight: 400,
                marginTop: '-0.25rem',
            },
        },
    });

    const classes = useStyles();
    const appBarGroupId = 'AppBar';
    const threeLinerGroupId = 'ThreeLiner';
    // AppBar props
    const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);
    const collapsedHeight = number('collapsedHeight', 64, {}, appBarGroupId);
    // ThreeLiner Props
    const title = text('title', 'title', threeLinerGroupId);
    const subtitle = text('subtitle', 'subtitle', threeLinerGroupId);
    const info = text('info', 'info', threeLinerGroupId);

    return (
        <AppBar
            expandedHeight={expandedHeight}
            collapsedHeight={collapsedHeight}
            classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}
        >
            <Toolbar>
                <ThreeLiner
                    title={title}
                    subtitle={subtitle}
                    info={info}
                    animationDuration={300}
                    classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}
                    className={classes.liner}
                ></ThreeLiner>
            </Toolbar>
        </AppBar>
    );
};

withDynamicContent.story = { name: 'with dynamic content' };