import { Avatar } from '@material-ui/core';
import { UserMenu } from '@brightlayer-ui/react-components';
import { action } from '@storybook/addon-actions';
import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
import React from 'react';
import { Pets, Email, ExitToApp, Settings } from '@material-ui/icons';
import { getLeftToRightIconTransform } from '../../src/utils';
const tRex = require('../../assets/trex.jpeg');

export const withNonTextAvatar = (): StoryFnReactReturnType => {
    const tRexAvatar = <Avatar src={tRex} alt={'User Avatar'} />;
    const iconAvatar = (
        <Avatar>
            <Pets />
        </Avatar>
    );
    return (
        <div style={{ display: 'flex', width: '100px', justifyContent: 'space-between' }}>
            <UserMenu
                avatar={tRexAvatar}
                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'"),
                            },
                        ],
                    },
                ]}
                onOpen={action('open')}
                onClose={action('close')}
            />
            <UserMenu
                avatar={iconAvatar}
                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'"),
                            },
                        ],
                    },
                ]}
                onOpen={action('open')}
                onClose={action('close')}
            />
        </div>
    );
};

withNonTextAvatar.story = { name: 'with non-text avatar' };