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

import { ToolbarSectionRight, ToolbarSectionLeft } from '../section'

import { SearchInput } from './search-input'
import {
    Knowledgebase,
    Notification,
    Overview,
    Videocamera,
} from '@planview/pv-icons'
import { shadow, spacingPx, text } from '@planview/pv-utilities'
import { LogoProjectPlace } from '../logos'
import styled, { keyframes } from 'styled-components'
import FloatingWrap from '@planview/pv-uikit/es/__utils/components/floating-wrap'
import { ToolbarButtonEmptyInverse } from '../button'

export default {
    title: 'pv-toolbar/NavigationBar/SearchInput',
    tags: ['autodocs'],
    component: SearchInput,
    args: {
        expanded: undefined,
    },
    argTypes: {
        expanded: {
            control: {
                type: 'radio',
            },
            options: [undefined, true, false],
        },
    },
    parameters: {
        badges: ['intl'],
    },
} satisfies Meta<typeof SearchInput>

export const Default: StoryFn<typeof SearchInput> = (args) => (
    <NavigationBar>
        <ToolbarSectionLeft></ToolbarSectionLeft>
        <ToolbarSectionRight moreMenuLabel="more menu">
            <SearchInput placeholder="Type to search" {...args} />
        </ToolbarSectionRight>
    </NavigationBar>
)

const animFrames = keyframes`
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
    }
`

const SearchPanel = styled.div`
    ${text.regular};
    padding: ${spacingPx.small};
    opacity: 0;
    animation: ${animFrames} 0.3s linear forwards;
    z-index: 10;
    width: 230px;
    height: 150px;
    background-color: white;
    ${shadow.regular};
`

export const ProjectPlaceSearchExample: StoryFn<typeof SearchInput> = () => {
    const [panelOpen, setPanelOpen] = React.useState(false)
    const [search, setSearch] = React.useState('')
    const inputRef = React.useRef<HTMLInputElement>(null)
    return (
        <>
            <NavigationBar
                logo={<LogoProjectPlace label="ProjectPlace home" />}
            >
                <ToolbarSectionLeft>
                    <ToolbarButtonEmptyInverse icon={<Overview />} withCaret>
                        My Overview
                    </ToolbarButtonEmptyInverse>
                </ToolbarSectionLeft>
                <ToolbarSectionRight moreMenuLabel="more menu">
                    <SearchInput
                        ref={inputRef}
                        placeholder="Type to search"
                        onExpandedChange={setPanelOpen}
                        expanded={panelOpen}
                        onChange={setSearch}
                    />
                    <ToolbarButtonEmptyInverse
                        icon={<Videocamera />}
                        tooltip="Start Zoom meeting"
                    />
                    <ToolbarButtonEmptyInverse
                        icon={<Knowledgebase />}
                        tooltip="Knowledge center"
                    />
                    <ToolbarButtonEmptyInverse
                        icon={<Notification />}
                        tooltip="Notifications"
                    />
                </ToolbarSectionRight>
            </NavigationBar>
            {panelOpen && search.length ? (
                <FloatingWrap
                    referenceElement={inputRef.current}
                    placement="bottom-start"
                >
                    <SearchPanel>{`Search results: ${search}`}</SearchPanel>
                </FloatingWrap>
            ) : null}
        </>
    )
}
ProjectPlaceSearchExample.parameters = {
    controls: { disabled: true, hideNoControlsWarning: true },
}
ProjectPlaceSearchExample.storyName = 'ProjectPlace search example'