import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import {
    Toolbar,
    ToolbarButtonEmpty,
    ToolbarButtonPrimary,
    ToolbarSectionRight,
    ToolbarSeparator,
    ToolbarDropdownMenu,
    ToolbarButtonGhost,
    ToolbarButtonGroup,
    ToolbarSectionLeft,
} from '..'

import {
    Activity,
    Board,
    BulletList,
    Filter,
    Graph,
    Help,
    PlusCircle,
    ResizeFull,
} from '@planview/pv-icons'
import { ListItem } from '@planview/pv-uikit'

export default {
    title: 'pv-toolbar/Sections/ToolbarSectionRight',
    tags: ['autodocs'],
    component: ToolbarSectionRight,
    argTypes: {},
} satisfies Meta<typeof ToolbarSectionRight>

export const Default: StoryFn<typeof ToolbarSectionRight> = () => {
    const [active, setActive] = React.useState(0)

    return (
        <Toolbar label="demo">
            <ToolbarSectionLeft></ToolbarSectionLeft>
            <ToolbarSectionRight moreMenuLabel="More">
                <ToolbarDropdownMenu
                    label="Dropdown"
                    trigger={(props) => (
                        <ToolbarButtonEmpty
                            withCaret
                            activated={props['aria-expanded']}
                            {...props}
                        >
                            Open dropdown
                        </ToolbarButtonEmpty>
                    )}
                >
                    <ListItem
                        onActivate={() => console.log('hit dropdown item 1')}
                        label="item 1"
                    />
                    <ListItem
                        onActivate={() => console.log('hit dropdown item 2')}
                        label="item 2"
                    />
                    <ListItem
                        onActivate={() => console.log('hit dropdown item 3')}
                        label="item 3"
                    />
                    <ListItem
                        onActivate={() => console.log('hit dropdown item 4')}
                        label="item 4"
                    />
                    <ListItem
                        onActivate={() => console.log('hit dropdown item 5')}
                        label="item 5"
                    />
                </ToolbarDropdownMenu>
                <ToolbarButtonGroup groupLabel="group">
                    <ToolbarButtonEmpty
                        icon={<Board />}
                        activated={!active}
                        onClick={() => {
                            setActive(0)
                            console.log('hit group button Board view')
                        }}
                    >
                        Board view
                    </ToolbarButtonEmpty>
                    <ToolbarButtonEmpty
                        icon={<BulletList />}
                        activated={active === 1}
                        onClick={() => {
                            setActive(1)
                            console.log('hit group button List view')
                        }}
                    >
                        List view
                    </ToolbarButtonEmpty>
                    <ToolbarButtonEmpty
                        icon={<Graph />}
                        activated={active === 2}
                        onClick={() => {
                            setActive(2)
                            console.log('hit group button Chart view')
                        }}
                    >
                        Chart view
                    </ToolbarButtonEmpty>
                </ToolbarButtonGroup>
                <ToolbarButtonPrimary
                    onClick={() => console.log('hit button help')}
                    tooltip="Help"
                    displayOn="desktop"
                    icon={<Help />}
                />
                <ToolbarButtonEmpty
                    onClick={() => console.log('hit button resize')}
                    tooltip="Resize"
                    displayOn="desktop"
                    icon={<ResizeFull />}
                />
            </ToolbarSectionRight>
        </Toolbar>
    )
}

Default.storyName = 'ToolbarSectionRight'

export const TwoDesktopAndOneTabletPortrait: StoryFn<
    typeof ToolbarSectionRight
> = () => (
    <Toolbar label="demo">
        <ToolbarSectionLeft></ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More">
            <ToolbarButtonEmpty
                onClick={() => console.log('hit button filter')}
                icon={<Filter />}
                tooltip="Filter"
                aria-label="Filter"
            />
            <ToolbarButtonEmpty
                onClick={() => console.log('hit button filter')}
                icon={<Activity />}
                displayOn="desktop"
                tooltip="Filter"
                aria-label="Filter"
            />
            <ToolbarSeparator />
            <ToolbarButtonGhost
                icon={<PlusCircle />}
                displayOn="desktop"
                onClick={() => {
                    console.log('hit button activity')
                }}
            >
                Add Activity
            </ToolbarButtonGhost>
        </ToolbarSectionRight>
    </Toolbar>
)

export const OneDesktopAndTwoTabletPortraitNested: StoryFn<
    typeof ToolbarSectionRight
> = () => (
    <Toolbar label="demo">
        <ToolbarSectionLeft></ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More">
            <div style={{ display: 'flex' }}>
                <ToolbarButtonEmpty
                    onClick={() => console.log('hit button filter')}
                    icon={<Filter />}
                    tooltip="Filter"
                />
                <ToolbarButtonEmpty
                    onClick={() => console.log('hit button filter')}
                    icon={<Activity />}
                    displayOn="desktop"
                    tooltip="Activity"
                />
            </div>
            <ToolbarSeparator />
            <ToolbarButtonGhost
                icon={<PlusCircle />}
                onClick={() => {
                    console.log('hit button activity')
                }}
            >
                Add Stuff
            </ToolbarButtonGhost>
        </ToolbarSectionRight>
    </Toolbar>
)