import { Avatar, makeStyles } from '@material-ui/core';
import * as Colors from '@brightlayer-ui/colors';
import { UserMenu } from '@brightlayer-ui/react-components';
import { action } from '@storybook/addon-actions';
import { color, number, select, text } from '@storybook/addon-knobs';
import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
import React from 'react';
import { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';
import { Email, ExitToApp, Settings } from '@material-ui/icons';
import { getLeftToRightIconTransform } from '../../src/utils';

export const withFullConfig = (): StoryFnReactReturnType => {
    const useStyles = makeStyles({
        root: {
            color: color('fontColor', Colors.white[50], 'Avatar'),
            backgroundColor: color('backgroundColor', Colors.blue[800], 'Avatar'),
        },
        paper: {
            backgroundColor: color('backgroundColor', Colors.white[50], 'Menu'),
        },
    });

    const classes = useStyles();
    const avatar = <Avatar classes={{ root: classes.root }}>{text('Avatar.value', 'AB', 'Avatar')}</Avatar>;

    const menuTitle = text('menuTitle', 'Menu Title', 'Menu');
    const menuSubtitle = text('menuSubtitle', 'Menu Subtitle', 'Menu');

    const anchorOriginHorizontal = select(
        'MenuProps.anchorOrigin.horizontal',
        ['left', 'center', 'right'],
        'left',
        'Menu'
    );
    const anchorOriginVertical = select('MenuProps.anchorOrigin.vertical', ['top', 'center', 'bottom'], 'top', 'Menu');
    const transformOriginHorizontal = select(
        'MenuProps.transformOrigin.horizontal',
        ['left', 'center', 'right'],
        'left',
        'Menu'
    );
    const transformOriginVertical = select(
        'MenuProps.transformOrigin.vertical',
        ['top', 'center', 'bottom'],
        'top',
        'Menu'
    );

    const useBottomSheetAt = number(
        'useBottomSheetAt',
        600,
        {
            range: true,
            min: 0,
            max: 1000,
            step: 50,
        },
        'Menu'
    );

    return (
        <UserMenu
            avatar={avatar}
            menuGroups={[
                {
                    items: [
                        {
                            title: 'Settings',
                            icon: <Settings />,
                            onClick: action("click 'Settings'"),
                        },
                        {
                            title: 'Contact Us',
                            icon: <Email />,
                            onClick: action("click 'Contact Us'"),
                        },
                        {
                            title: 'Log Out',
                            icon: <ExitToApp style={getLeftToRightIconTransform()} />,
                            onClick: action("click 'Log Out'"),
                        },
                    ],
                    fontColor: color('menuGroups.fontColor', Colors.black[500], 'Menu'),
                    iconColor: color('menuGroups.iconColor', Colors.blue[800], 'Menu'),
                    title: text('menuGroups[0].title', 'Account Management', 'Menu'),
                },
            ]}
            menuTitle={menuTitle}
            menuSubtitle={menuSubtitle}
            MenuProps={{
                classes: { paper: classes.paper },
                anchorOrigin: { horizontal: anchorOriginHorizontal, vertical: anchorOriginVertical },
                transformOrigin: { horizontal: transformOriginHorizontal, vertical: transformOriginVertical },
            }}
            onOpen={action('open')}
            onClose={action('close')}
            useBottomSheetAt={useBottomSheetAt}
        />
    );
};

withFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };