import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import { ToolbarItemBridge } from '.'
import styled from 'styled-components'
import { spacingPx, text } from '@planview/pv-utilities'
import { ToolbarSectionLeft, ToolbarSectionRight } from '../section'
import { LogoAgilePlace } from '../logos'
import { NavigationBar } from '../navigation-bar'
import { Help } from '@planview/pv-icons'
import { ToolbarButtonEmptyInverse } from '../button/button'

const Header = styled.label`
    ${text.title};
    padding-left: ${spacingPx.small};
`

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

/**
 * ### Example
 *
 * If you use your keyboard left/right arrows you will observe
 * the bridged button behaves as part of the single tab stop.
 */
export const Default: StoryFn<typeof ToolbarItemBridge> = () => {
    const ref = React.useRef<HTMLDivElement>(null)

    return (
        <NavigationBar logo={<LogoAgilePlace url="/" />}>
            <ToolbarSectionLeft>
                <Header>Example Application</Header>
            </ToolbarSectionLeft>

            <ToolbarSectionRight>
                <ToolbarItemBridge ref={ref}>
                    <button tabIndex={-1}>Notifications</button>
                </ToolbarItemBridge>
                <ToolbarButtonEmptyInverse icon={<Help />} tooltip="Help" />
            </ToolbarSectionRight>
        </NavigationBar>
    )
}