import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import { NavigationBar, UserMenu } from '.'
import { Help, Logout, Settings, Support, User } from '@planview/pv-icons'

import { ListItem, ListItemDivider } from '@planview/pv-uikit'
import { theme } from '@planview/pv-utilities'

export default {
    title: 'pv-toolbar/NavigationBar/UserMenu',
    tags: ['autodocs'],
    component: UserMenu,
    parameters: {
        badges: ['intl'],
        controls: { disabled: true, hideNoControlsWarning: true },
    },
} satisfies Meta<typeof UserMenu>

export const Default: StoryFn<typeof UserMenu> = () => (
    <NavigationBar>
        <UserMenu triggerElement={<User color={theme.iconInverse} />}>
            <ListItem icon={<Settings />} label="Settings" />
            <ListItem icon={<Help />} label="Help" />
            <ListItem icon={<Support />} label="Customer support" />
            <ListItemDivider />
            <ListItem icon={<Logout />} label="Log out" />
        </UserMenu>
    </NavigationBar>
)