import { Typography } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import { DrawerLayout } from '@brightlayer-ui/react-components';
import {
    Drawer,
    DrawerBody,
    DrawerFooter,
    DrawerHeader,
    DrawerNavGroup,
    NavItem,
} from '@brightlayer-ui/react-components/core/Drawer';
import { boolean, number, select } from '@storybook/addon-knobs';
import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
import React, { useState } from 'react';
import { useDarkMode } from 'storybook-dark-mode';
import EatonFooterLogoLight from '../../assets/EatonLogoLight.png';
import EatonFooterLogoDark from '../../assets/EatonLogoDark.png';
import { Person, Today, Accessibility, NotificationsActive } from '@material-ui/icons';

export const inDrawerLayout = (): StoryFnReactReturnType => {
    const variant = select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent');
    const [selected, setSelected] = useState('');
    const isDarkMode = useDarkMode();

    const navGroupItems: NavItem[] = [
        {
            title: 'Identity Management',
            itemID: '1',
            icon: <Person />,
            onClick: (): void => setSelected('1'),
        },
        {
            title: 'Calendar',
            itemID: '2',
            icon: <Today />,
            onClick: (): void => setSelected('2'),
        },
        {
            title: 'Accessibility',
            itemID: '3',
            icon: <Accessibility />,
            onClick: (): void => setSelected('3'),
        },
        {
            title: 'Notifications',
            itemID: '4',
            icon: <NotificationsActive />,
            onClick: (): void => setSelected('4'),
        },
    ];

    return (
        <DrawerLayout
            drawer={
                <Drawer
                    open={boolean('open', true)}
                    width={number('width', 350, {
                        range: true,
                        min: 200,
                        max: 700,
                        step: 50,
                    })}
                    variant={variant}
                    condensed={boolean('condensed (rail only)', false)}
                    ModalProps={{
                        disableEnforceFocus: true,
                    }}
                    activeItem={selected}
                >
                    <DrawerHeader
                        icon={<MenuIcon />}
                        titleContent={
                            <div
                                style={{
                                    paddingLeft: 16,
                                    paddingRight: 16,
                                    display: 'flex',
                                    height: '100%',
                                    flexDirection: 'column',
                                    justifyContent: 'center',
                                }}
                            >
                                <Typography variant={'subtitle2'} style={{ fontWeight: 100 }}>
                                    Brightlayer UI
                                </Typography>
                                <Typography variant={'h6'} style={{ marginTop: -8 }}>
                                    DrawerLayout
                                </Typography>
                            </div>
                        }
                    />
                    <DrawerBody>
                        <DrawerNavGroup items={navGroupItems} />
                    </DrawerBody>
                    {variant !== 'rail' && (
                        <DrawerFooter>
                            <div
                                style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    alignItems: 'center',
                                    flexDirection: 'row',
                                    padding: 16,
                                }}
                            >
                                <img
                                    src={isDarkMode ? EatonFooterLogoDark : EatonFooterLogoLight}
                                    alt="Eaton Logo"
                                    height={28}
                                    width={'auto'}
                                />
                                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                                    <Typography
                                        variant={'caption'}
                                    >{`Copyright \u00A9 Eaton ${new Date().getFullYear()}`}</Typography>
                                    <Typography variant={'caption'}>All Rights Reserved</Typography>
                                </div>
                            </div>
                        </DrawerFooter>
                    )}
                </Drawer>
            }
        >
            <div
                style={{
                    backgroundColor: '#777',
                    color: 'white',
                    height: '100%',
                    padding: '30px',
                    boxSizing: 'border-box',
                }}
            >
                <Typography variant={'h2'}>Body content goes here.</Typography>
            </div>
        </DrawerLayout>
    );
};

inDrawerLayout.story = { name: 'within a Drawer Layout' };