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 type { ToolbarItemCollapsedViewProps } from '.'
import { ToolbarItem, ToolbarItemView, ToolbarItemCollapsedView } from '.'

export default {
    title: 'pv-toolbar/Generic/ToolbarItem/ToolbarItemCollapsedView',
    tags: ['autodocs'],
    component: ToolbarItemCollapsedView,
    argTypes: {
        onHit: { action: 'hit button', table: { disable: true } },
    },

    parameters: {
        controls: { disabled: true, hideNoControlsWarning: true },
        docs: {
            description: {
                component: `
\`ToolbarItemCollapsedView\`, always a child of the \`ToolbarItem\`, renders the component representation in the more menu when the component collapses

### Usage
\`\`\`typescript

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


<ToolbarItemCollapsedView>
    <ListItem
        icon={<Board />}
        onActivate={() => onHit('hit button')}
        label="button"
    />
</ToolbarItemCollapsedView>
\`\`\`
            `,
            },
        },
    },
} satisfies Meta<
    ToolbarItemCollapsedViewProps & {
        onHit: (msg: string) => void
    }
>
type StoryToolbarItemCollapsedView = StoryFn<
    React.ComponentProps<typeof ToolbarItem> & {
        onHit: (msg: string) => void
    }
>

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

Default.storyName = 'ToolbarItemCollapsedView'