import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import { NavigationBar, UserMenu } from '.'
import { ToolbarSectionRight, ToolbarSectionLeft } from '../section'
import { ToolbarButtonEmptyInverse } from '../button'
import {
    Activity,
    Board,
    ChevronRight,
    Help,
    Knowledgebase,
    Logout,
    Notification,
    Overview,
    Settings,
    Support,
    Tools,
    User,
    Videocamera,
} from '@planview/pv-icons'
import {
    LogoAdaptiveWork,
    LogoAdvisorExpress,
    LogoAdvisor,
    LogoAgilePlace,
    LogoBarometer,
    LogoChangePoint,
    LogoDaptiv,
    LogoEA,
    LogoIdeaPlace,
    LogoOKR,
    LogoPortfolios,
    LogoPPMPro,
    LogoPVAdmin,
    LogoRoadmaps,
    LogoProjectPlace,
    LogoHub,
    LogoViz,
    LogoProjectAdvantage,
} from '../logos'

import { Avatar, ListItem, ListItemDivider } from '@planview/pv-uikit'
import { SearchInput } from './search-input'
import { ToolbarDropdownMenu } from '../dropdown'
import { align, theme, iconSizes } from '@planview/pv-utilities'
import styled from 'styled-components'

export default {
    title: 'pv-toolbar/NavigationBar',
    tags: ['autodocs'],
    component: NavigationBar,
    args: {
        logo: <LogoAdvisor title="Planview Advisor" />,
    },
    argTypes: {
        productSwitcher: {
            control: {
                type: 'radio',
            },
            defaultValue: undefined,
            options: ['Without', 'With'],
            mapping: {
                Without: undefined,
                With: (
                    <div>
                        <ToolbarButtonEmptyInverse
                            tooltip="Product switcher"
                            icon={<Tools />}
                        />
                    </div>
                ),
            },
        },
        children: {
            control: false,
        },
        logo: {
            options: [
                'AdaptiveWork',
                'PVAdmin',
                'Advisor',
                'AdvisorExpress',
                'AgilePlace',
                'Barometer',
                'ChangePoint',
                'Daptiv',
                'EA',
                'IdeaPlace',
                'OKR',
                'Portfolios',
                'PPMPro',
                'ProjectPlace',
                'RoadMaps',
                'Hub',
                'Viz',
                'ProjectAdvantage',
            ],
            mapping: {
                AdaptiveWork: <LogoAdaptiveWork />,
                PVAdmin: <LogoPVAdmin />,
                Advisor: <LogoAdvisor label="Planview Advisor" />,
                AdvisorExpress: <LogoAdvisorExpress />,
                AgilePlace: <LogoAgilePlace />,
                Barometer: <LogoBarometer />,
                ChangePoint: <LogoChangePoint />,
                Daptiv: <LogoDaptiv />,
                EA: <LogoEA />,
                IdeaPlace: <LogoIdeaPlace />,
                OKR: <LogoOKR />,
                Portfolios: <LogoPortfolios />,
                PPMPro: <LogoPPMPro />,
                ProjectPlace: <LogoProjectPlace />,
                RoadMaps: <LogoRoadmaps />,
                Hub: <LogoHub />,
                Viz: <LogoViz />,
                ProjectAdvantage: <LogoProjectAdvantage />,
            },
        },
    },
    parameters: {
        badges: ['intl'],
    },
} satisfies Meta<typeof NavigationBar>

export const Default: StoryFn<typeof NavigationBar> = (args) => (
    <NavigationBar {...args} aria-label="Main navigation">
        <ToolbarSectionLeft>
            <ToolbarButtonEmptyInverse preventLabelCollapse icon={<Overview />}>
                My overview
            </ToolbarButtonEmptyInverse>
        </ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More actions">
            <SearchInput />
            <ToolbarButtonEmptyInverse
                icon={<Videocamera />}
                tooltip="Start zoom meeting"
            />
            <ToolbarButtonEmptyInverse
                icon={<Knowledgebase />}
                tooltip="Knowledge center"
            />
            <ToolbarButtonEmptyInverse
                icon={<Notification />}
                tooltip="Notifications"
            />
            <UserMenu
                triggerElement={
                    <Avatar size="medium" src="img/avatars/400-3.jpg" />
                }
            >
                <ListItem icon={<Settings />} label="Settings" />
                <ListItem icon={<Help />} label="Help" />
                <ListItem icon={<Support />} label="Customer support" />
                <ListItemDivider />
                <ListItem icon={<Logout />} label="Log out" />
            </UserMenu>
        </ToolbarSectionRight>
    </NavigationBar>
)

/**
 * Example showing the navigation bar without the left separator, since there is no content in the `ToolbarSectionLeft` as recommended in the [best practices](https://design.planview.com/components/navigation/navigation-bar#left-section) for the Navigation bar.
 */
export const WithoutSeparator: StoryFn<typeof NavigationBar> = (args) => (
    <NavigationBar
        {...args}
        showLogoSeparator={false}
        aria-label="Main navigation"
    >
        <ToolbarSectionLeft></ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More actions">
            <SearchInput />
            <ToolbarButtonEmptyInverse
                icon={<Videocamera />}
                tooltip="Start zoom meeting"
            />
            <ToolbarButtonEmptyInverse
                icon={<Knowledgebase />}
                tooltip="Knowledge center"
            />
            <ToolbarButtonEmptyInverse
                icon={<Notification />}
                tooltip="Notifications"
            />
            <UserMenu
                triggerElement={
                    <Avatar size="medium" src="img/avatars/400-3.jpg" />
                }
            >
                <ListItem icon={<Settings />} label="Settings" />
                <ListItem icon={<Help />} label="Help" />
                <ListItem icon={<Support />} label="Customer support" />
                <ListItemDivider />
                <ListItem icon={<Logout />} label="Log out" />
            </UserMenu>
        </ToolbarSectionRight>
    </NavigationBar>
)

WithoutSeparator.parameters = {
    docs: {
        source: {
            code: `
<NavigationBar {...args} showLogoSeparator={false} aria-label="Main navigation">
    <ToolbarSectionLeft></ToolbarSectionLeft>
    <ToolbarSectionRight moreMenuLabel="More actions">
        ...rest of the content omitted for brevity
    </ToolbarSectionRight>
</NavigationBar>
`,
        },
    },
}

const BreadCrumbContainer = styled.div`
    ${align.centerV};
`

export const BreadCrumb: StoryFn<typeof NavigationBar> = () => (
    <NavigationBar
        aria-label="Main navigation"
        logo={<LogoPortfolios url="" label="Portfolios home" />}
    >
        <ToolbarSectionLeft>
            <BreadCrumbContainer aria-label="Breadcrumb">
                <ToolbarDropdownMenu
                    label="Context"
                    trigger={(props) => (
                        <ToolbarButtonEmptyInverse
                            withCaret
                            icon={<Activity />}
                            activated={props['aria-expanded']}
                            {...props}
                        >
                            Context
                        </ToolbarButtonEmptyInverse>
                    )}
                >
                    <ListItem
                        icon={<Activity />}
                        selected
                        label="Context item 1"
                    />
                    <ListItem icon={<Board />} label="Context item 2" />
                </ToolbarDropdownMenu>
                <ChevronRight
                    size={iconSizes.SIZE_XSMALL}
                    color={theme.iconNormal}
                />
                <ToolbarDropdownMenu
                    label="Sub context"
                    trigger={(props) => (
                        <ToolbarButtonEmptyInverse
                            preventLabelCollapse
                            withCaret
                            icon={<Board />}
                            activated={props['aria-expanded']}
                            {...props}
                        >
                            Sub context
                        </ToolbarButtonEmptyInverse>
                    )}
                >
                    <ListItem icon={<Activity />} label="Sub context item 1" />
                    <ListItem
                        icon={<Board />}
                        selected
                        label="Sub context item 2"
                    />
                    <ListItem icon={<User />} label="Sub context item 3" />
                </ToolbarDropdownMenu>
            </BreadCrumbContainer>
        </ToolbarSectionLeft>
    </NavigationBar>
)

BreadCrumb.storyName = 'Example how to construct a breadcrumb'
BreadCrumb.parameters = {
    controls: { disabled: true, hideNoControlsWarning: true },
    docs: {
        description: {
            story: `Example below shows a breadcrumb constructed using \`ToolbarDropdownMenu\` -components.
In some cases the bread-crumb would be made up of a set of links instead. This can be achieved using the \`ToolbarItem\` to create custom, keyboard navigable content.
`,
        },
        source: {
            code: `
<NavigationBar
    aria-label="Main navigation"
    logo={<LogoPortfolios url="" label="Portfolios home" />}
>
    <ToolbarSectionLeft>
        <BreadCrumbContainer aria-label="Breadcrumb">
            <ToolbarDropdownMenu
                label="Context"
                trigger={(props) => (
                    <ToolbarButtonEmptyInverse
                        withCaret
                        icon={<Activity />}
                        activated={props['aria-expanded']}
                        {...props}
                    >
                        Context
                    </ToolbarButtonEmptyInverse>
                )}
            >
                <ListItem
                    icon={<Activity />}
                    selected
                    label="Context item 1"
                />
                <ListItem icon={<Board />} label="Context item 2" />
            </ToolbarDropdownMenu>
            <ChevronRight
                size={iconSizes.SIZE_XSMALL}
                color={color.iconNormal}
            />
            <ToolbarDropdownMenu
                label="Sub context"
                trigger={(props) => (
                    <ToolbarButtonEmptyInverse
                        preventLabelCollapse
                        withCaret
                        icon={<Board />}
                        activated={props['aria-expanded']}
                        {...props}
                    >
                        Sub context
                    </ToolbarButtonEmptyInverse>
                )}
            >
                <ListItem icon={<Activity />} label="Sub context item 1" />
                <ListItem
                    icon={<Board />}
                    selected
                    label="Sub context item 2"
                />
                <ListItem icon={<User />} label="Sub context item 3" />
            </ToolbarDropdownMenu>
        </BreadCrumbContainer>
    </ToolbarSectionLeft>
</NavigationBar>
            `,
        },
    },
}