import React from 'react';
import { boolean, number, select, text } from '@storybook/addon-knobs';
import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
import { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';
import { AppBar, Spacer, ThreeLiner } from '@brightlayer-ui/react-components';
import bgImage from '../../assets/farm.jpg';
import { Menu, Work, Settings, Home } from '@material-ui/icons';
import { IconButton, makeStyles, Toolbar } from '@material-ui/core';
import { action } from '@storybook/addon-actions';
import { getDirection } from '@brightlayer-ui/storybook-rtl-addon';
import clsx from 'clsx';

const useStyles = makeStyles(() => ({
    title: {},
    subtitle: {},
    info: {},
    liner: {
        top: 0,
        position: 'absolute',
        flexGrow: 1,
        marginLeft: 56,
    },
    linerRTL: {
        marginLeft: 0,
        marginRight: 56,
    },
    expanded: {
        '& $liner': {
            top: 64,
        },
    },
    collapsed: {
        '& $title': {
            fontSize: '1.25rem',
            fontWeight: 600,
        },
        '& $subtitle': {
            fontSize: 0,
        },
        '& $info': {
            fontSize: '1rem',
            fontWeight: 400,
            marginTop: '-0.25rem',
        },
    },
    toolbarGutters: {
        paddingLeft: 16,
        paddingRight: 4,
    },
    toolbarGuttersRTL: {
        paddingLeft: 4,
        paddingRight: 16,
    },
}));

export const withFullConfig = (): StoryFnReactReturnType => {
    const classes = useStyles();
    const direction = getDirection();
    const appBarGroupId = 'AppBar';
    const threeLinerGroupId = 'ThreeLiner';
    // AppBar props
    const animationDuration = number('animationDuration', 300, {}, appBarGroupId);
    const showBackgroundImage = boolean('show backgroundImage', true, appBarGroupId);
    const collapsedHeight = number('collapsedHeight', 64, {}, appBarGroupId);
    const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);
    const scrollThreshold = number('scrollThreshold', 136, {}, appBarGroupId);
    const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap', 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}
            scrollThreshold={scrollThreshold}
            animationDuration={animationDuration}
            backgroundImage={showBackgroundImage ? bgImage : undefined}
            variant={variant}
            classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}
        >
            <Toolbar classes={{ gutters: direction === 'rtl' ? classes.toolbarGuttersRTL : classes.toolbarGutters }}>
                <IconButton onClick={action('home icon clicked...')} color={'inherit'} edge={'start'}>
                    <Menu />
                </IconButton>
                <Spacer />
                <ThreeLiner
                    classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}
                    className={clsx([classes.liner, direction === 'rtl' ? classes.linerRTL : ''])}
                    title={title}
                    subtitle={subtitle}
                    info={info}
                    animationDuration={animationDuration}
                />
                <div style={{ display: 'flex', flexDirection: 'row' }}>
                    <IconButton onClick={action('home icon clicked...')} color={'inherit'}>
                        <Home />
                    </IconButton>
                    <IconButton onClick={action('work icon clicked...')} color={'inherit'}>
                        <Work />
                    </IconButton>
                    <IconButton onClick={action('settings icon clicked...')} color={'inherit'}>
                        <Settings />
                    </IconButton>
                </div>
            </Toolbar>
        </AppBar>
    );
};

withFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };