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

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

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

export default {
    title: 'pv-toolbar/Generic/ToolbarItem/ToolbarItemView',
    tags: ['autodocs'],
    component: ToolbarItemView,
    argTypes: {
        onHit: { action: 'hit button', table: { disable: true } },
    },
    parameters: {
        controls: { disabled: true, hideNoControlsWarning: true },
        docs: {
            description: {
                component: `
\`ToolbarItemView\`, always a child of the \`ToolbarItem\`, renders the component representation inside the toolbar when not collapsed into the more menu.

For the component to work properly you need to
1. Use the refObject passed as the first argument of the function
2. Spread the \`toolbarItemProps\` on the target element (the element you want to be navigable/focusable)


__Note:__ The props.toolbarItemProps include \`onClick\` and \`onKeyDown\` handlers that need to be applied to the element.
If you need to add your own event-handling, make sure to also call the handlers passed from \`toolbarItemProps\` (See example below)

### Usage
\`\`\`typescript

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


<ToolbarItemView<HTMLButtonElement>>
    {(ref, props) => (
        <button
            ref={ref}
            disabled={props.disabled}
            {...props.toolbarItemProps}
            onClick={(ev) => {
                props.toolbarItemProps.onClick(ev)
                onHit('hit button')
            }}
        >
            {showLabels ? 'button' : <Board />}
        </button>
    )}
</ToolbarItemView>
\`\`\`

### Typing the ref

ToolbarItemViews props is generic and takes a __type__ -parameter \`T\`. The type should be of a focusable \`HTMLElement\`-type like \`HTMLButtonElement\`, \`HTMLInputElement\` etc...

\`\`\`typescript
<ToolbarItemView<HTMLInputElement>>
    ....containing ref is of type "HTMLInputElement"
</ToolbarItemView>

\`\`\`
            `,
            },
        },
    },
} satisfies Meta<
    React.ComponentProps<typeof ToolbarItemView> & {
        onHit: (msg: string) => void
    }
>

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

export const Default: StoryFn<StoryToolbarItemView> = ({ onHit }) => (
    <Toolbar label="Example">
        <ToolbarSectionLeft></ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="More menu">
            <ToolbarItem>
                <ToolbarItemView<HTMLButtonElement>>
                    {(
                        ref,
                        {
                            showLabels,
                            toolbarItemProps: {
                                focused: _focused,
                                ...toolbarItemProps
                            },
                            disabled,
                        }
                    ) => (
                        <button
                            ref={ref}
                            disabled={disabled}
                            {...toolbarItemProps}
                            onClick={(ev) => {
                                toolbarItemProps.onClick(ev)
                                onHit('hit button')
                            }}
                        >
                            {showLabels ? 'button' : <Board />}
                        </button>
                    )}
                </ToolbarItemView>
                <ToolbarItemCollapsedView>
                    <ListItem
                        onActivate={() => onHit('hit button')}
                        label="button"
                    />
                </ToolbarItemCollapsedView>
            </ToolbarItem>
        </ToolbarSectionRight>
    </Toolbar>
)
Default.storyName = 'ToolbarItemView'