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

import { Board, Filter } from '@planview/pv-icons'
import { ListItem } from '@planview/pv-uikit'

import type { ToolbarItemProps } from '.'
import { ToolbarItem, ToolbarItemView, ToolbarItemCollapsedView } from '.'

export default {
    title: 'pv-toolbar/Generic/ToolbarItem',
    tags: ['autodocs'],
    component: ToolbarItem,
    argTypes: {
        onHit: { action: 'hit button', table: { disable: true } },
    },
    parameters: {
        controls: { disabled: true, hideNoControlsWarning: true },
        docs: {
            description: {
                component: `
Generic component to use for custom components in Toolbar.


### Anatomy:

\`\`\`typescript

<ToolbarItem>
    <ToolbarItemView<{RefType}>>
        {/*----- The representation of the component when NOT collapsed into more menu ---*/}
    </ToolbarItemView>
    <ToolbarItemCollapsedView>
        {/*----- The representation of the component when collapsed into the more menu. Optional  ---*/}
    </ToolbarItemCollapsedView>
</ToolbarItem>

\`\`\`


### Usage:

\`\`\`typescript

import { ToolbarItem, ToolbarItemView, ToolbarItemCollapsedView } from '@planview/pv-toolbar'


<ToolbarItem>
    <ToolbarItemView<HTMLButtonElement>>
        {(
            ref,
            {
                toolbarItemProps: {
                    focused: _focused,
                    ...toolbarItemProps
                },
                disabled,
            }
        ) => (
            <button
                ref={ref}
                disabled={disabled}
                {...toolbarItemProps}
                onClick={(ev) => {
                    toolbarItemProps.onClick(ev)
                    onHit('hit custom button tablet portrait')
                }}
            >
                {showLabels ? 'tablet portrait' : <Board />}
            </button>
        )}
    </ToolbarItemView>
    <ToolbarItemCollapsedView>
        <ListItem
            onActivate={() => onHit('hit custom button tablet portrait')}
            label="tablet portrait"
        />
    </ToolbarItemCollapsedView>
</ToolbarItem>
\`\`\`
            `,
            },
        },
    },
} satisfies Meta<ToolbarItemProps & { onHit: (msg: string) => void }>

type StoryToolbarItem = React.ComponentProps<typeof ToolbarItem> & {
    onHit: (msg: string) => void
}

export const Default: StoryFn<StoryToolbarItem> = ({ onHit }) => (
    <Toolbar label="Example">
        <ToolbarSectionLeft>
            <ToolbarButtonEmpty
                onClick={() => onHit('filter')}
                icon={<Filter />}
                tooltip="Filter"
                aria-label="Filter"
            />
        </ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More menu">
            <ToolbarItem displayOn="phone">
                <ToolbarItemView<HTMLButtonElement>>
                    {(
                        ref,
                        {
                            toolbarItemProps: {
                                focused: _focused,
                                ...toolbarItemProps
                            },
                            disabled,
                        }
                    ) => (
                        <button
                            ref={ref}
                            disabled={disabled}
                            {...toolbarItemProps}
                            onClick={(ev) => {
                                toolbarItemProps.onClick(ev)
                                onHit('hit custom button phone')
                            }}
                        >
                            {'phone'}
                        </button>
                    )}
                </ToolbarItemView>
                <ToolbarItemCollapsedView>
                    <ListItem
                        onActivate={() => onHit('hit custom button phone')}
                        label="phone (this should never be shown"
                    />
                </ToolbarItemCollapsedView>
            </ToolbarItem>
            <ToolbarItem>
                <ToolbarItemView<HTMLButtonElement>>
                    {(
                        ref,
                        {
                            showLabels,
                            toolbarItemProps: {
                                focused: _focused,
                                ...toolbarItemProps
                            },
                            disabled,
                        }
                    ) => (
                        <button
                            ref={ref}
                            disabled={disabled}
                            {...toolbarItemProps}
                            onClick={(ev) => {
                                toolbarItemProps.onClick(ev)
                                onHit('hit custom button tablet portrait')
                            }}
                        >
                            {showLabels ? 'tablet portrait' : <Board />}
                        </button>
                    )}
                </ToolbarItemView>
                <ToolbarItemCollapsedView>
                    <ListItem
                        onActivate={() =>
                            onHit('hit custom button tablet portrait')
                        }
                        label="tablet portrait"
                    />
                </ToolbarItemCollapsedView>
            </ToolbarItem>
            <ToolbarItem displayOn="desktop">
                <ToolbarItemView<HTMLButtonElement>>
                    {(
                        ref,
                        {
                            showLabels,
                            toolbarItemProps: {
                                focused: _focused,
                                ...toolbarItemProps
                            },
                            disabled,
                        }
                    ) => (
                        <button
                            ref={ref}
                            disabled={disabled}
                            {...toolbarItemProps}
                            onClick={(ev) => {
                                toolbarItemProps.onClick(ev)
                                onHit('hit custom button desktop')
                            }}
                        >
                            {showLabels ? 'desktop' : <Board />}
                        </button>
                    )}
                </ToolbarItemView>
                <ToolbarItemCollapsedView>
                    <ListItem
                        onActivate={() => onHit('hit custom button desktop')}
                        label="desktop"
                    />
                </ToolbarItemCollapsedView>
            </ToolbarItem>
        </ToolbarSectionRight>
    </Toolbar>
)

Default.storyName = 'ToolbarItem'

export const NoCollapsedItem: StoryFn<StoryToolbarItem> = ({ onHit }) => (
    <Toolbar label="Example">
        <ToolbarSectionLeft></ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More menu">
            <ToolbarItem displayOn="phone">
                <ToolbarItemView<HTMLButtonElement>>
                    {(
                        ref,
                        {
                            toolbarItemProps: {
                                focused: _focused,
                                ...toolbarItemProps
                            },
                            disabled,
                        }
                    ) => (
                        <button
                            ref={ref}
                            disabled={disabled}
                            {...toolbarItemProps}
                            onClick={(ev) => {
                                toolbarItemProps.onClick(ev)
                                onHit('hit custom button phone')
                            }}
                        >
                            {'phone'}
                        </button>
                    )}
                </ToolbarItemView>
            </ToolbarItem>
            <ToolbarItem>
                <ToolbarItemView<HTMLButtonElement>>
                    {(
                        ref,
                        {
                            showLabels,
                            toolbarItemProps: {
                                focused: _focused,
                                ...toolbarItemProps
                            },
                            disabled,
                        }
                    ) => (
                        <button
                            ref={ref}
                            disabled={disabled}
                            {...toolbarItemProps}
                            onClick={(ev) => {
                                toolbarItemProps.onClick(ev)
                                onHit('hit custom button tablet portrait')
                            }}
                        >
                            {showLabels ? 'tablet portrait' : <Board />}
                        </button>
                    )}
                </ToolbarItemView>
            </ToolbarItem>
            <ToolbarItem displayOn="desktop">
                <ToolbarItemView<HTMLButtonElement>>
                    {(
                        ref,
                        {
                            showLabels,
                            toolbarItemProps: {
                                focused: _focused,
                                ...toolbarItemProps
                            },
                            disabled,
                        }
                    ) => (
                        <button
                            ref={ref}
                            disabled={disabled}
                            {...toolbarItemProps}
                            onClick={(ev) => {
                                toolbarItemProps.onClick(ev)
                                onHit('hit custom button desktop')
                            }}
                        >
                            {showLabels ? 'desktop' : <Board />}
                        </button>
                    )}
                </ToolbarItemView>
            </ToolbarItem>
        </ToolbarSectionRight>
    </Toolbar>
)