import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import { ProductSwitcherBridge } from './product-switcher-bridge'
import { NavigationBar } from '.'
import styled from 'styled-components'
import { spacingPx, text } from '@planview/pv-utilities'
import { ToolbarSectionLeft } from '../section'
import { LogoAgilePlace } from '../logos'
const Header = styled.label`
    ${text.title};
    padding-left: ${spacingPx.small};
`

export default {
    title: 'pv-toolbar/NavigationBar/ProductSwitcherBridge',
    tags: ['autodocs'],
    component: ProductSwitcherBridge,
    parameters: {
        badges: ['intl'],
    },
} satisfies Meta<typeof ProductSwitcherBridge>

export const Default: StoryFn<typeof ProductSwitcherBridge> = () => {
    const ref = React.useRef<HTMLDivElement>(null)

    React.useEffect(() => {
        if (ref.current) {
            /* This is where you would initialize the Dovetail component
            and pass it the `ref.current` as its element */
            const button = document.createElement('button')
            button.setAttribute('aria-controls', 'app-switcher-list')
            button.tabIndex = -1
            button.innerHTML = 'Product Switcher'
            ref.current.appendChild(button)
        }
    }, [])

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