import React from 'react'
import { render } from '../__utils/test-utils'
import userEvent from '@testing-library/user-event'
import { UserMenu } from './user-menu'
import { NavigationBar } from './navigation-bar'
import { User } from '@planview/pv-icons'
import { ListItem } from '@planview/pv-uikit'
import { ToolbarSectionLeft } from '../section'
import { ToolbarButtonEmptyInverse } from '../button'

describe('UserMenu', () => {
    describe('Layout', () => {
        it('should not render if no configuration', () => {
            const { queryByLabelText } = render(
                <NavigationBar>
                    <></>
                </NavigationBar>
            )
            expect(queryByLabelText('User menu')).not.toBeInTheDocument()
        })
        it('should render if configured', () => {
            const { getByRole } = render(
                <NavigationBar>
                    <UserMenu triggerElement={<User />}>
                        <ListItem label="test item" />
                    </UserMenu>
                </NavigationBar>
            )
            expect(
                getByRole('button', { name: 'User menu', expanded: false })
            ).toBeInTheDocument()
        })
    })
    describe('Interaction', () => {
        it('should be last item in navigation', async () => {
            const { getByRole, queryByLabelText } = render(
                <NavigationBar>
                    <UserMenu triggerElement={<User />}>
                        <ListItem label="test item" />
                    </UserMenu>
                    <ToolbarSectionLeft>
                        <ToolbarButtonEmptyInverse>
                            Button 1
                        </ToolbarButtonEmptyInverse>
                        <ToolbarButtonEmptyInverse>
                            Button 2
                        </ToolbarButtonEmptyInverse>
                    </ToolbarSectionLeft>
                </NavigationBar>
            )
            await userEvent.keyboard('{Tab}')
            expect(getByRole('button', { name: 'Button 1' })).toHaveFocus()
            await userEvent.keyboard('{ArrowRight}{ArrowRight}')
            expect(queryByLabelText('User menu')).toHaveFocus()
        })
        it('should have tooltip when focused', async () => {
            const { queryByLabelText, findByRole } = render(
                <NavigationBar>
                    <UserMenu triggerElement={<User />}>
                        <ListItem label="test item" />
                    </UserMenu>
                </NavigationBar>
            )
            await userEvent.keyboard('{Tab}')
            expect(queryByLabelText('User menu')).toHaveFocus()
            expect(
                await findByRole('tooltip', { name: 'User menu' })
            ).toBeInTheDocument()
        })
        it('should expand list and render list item', async () => {
            const { getByRole } = render(
                <NavigationBar>
                    <UserMenu triggerElement={<User />}>
                        <ListItem label="test item" />
                    </UserMenu>
                </NavigationBar>
            )
            await userEvent.keyboard('{Tab}{ArrowDown}')
            expect(
                getByRole('button', { name: 'User menu', expanded: true })
            ).toBeInTheDocument()
            expect(
                getByRole('menuitemradio', { name: 'test item' })
            ).toBeInTheDocument()
        })
    })
})