import * as React from 'react'
import { SubMenu, DropdownMenu } from '@planview/pv-uikit'
import type {
    DropdownTriggerProps,
    DropdownMenuProps,
    ButtonProps,
} from '@planview/pv-uikit'
import type { IconProps } from '@planview/pv-icons'
import {
    ToolbarItem,
    ToolbarItemCollapsedView,
    ToolbarItemView,
} from '../wrapper'
import { WrappingParentContext } from '../utils/context'
import type { DisplayOnType } from '../utils'
import { DISPLAY_ON_TABLET_PORTRAIT } from '../utils'
import type { ToolbarButtonProps } from '../button'
import { ToolbarButtonEmpty } from '../button'

type TriggerConfig = Omit<
    ToolbarButtonProps,
    | 'aria-haspopup'
    | 'aria-controls'
    | 'aria-expanded'
    | 'aria-disabled'
    | 'children'
> & {
    /** Label of trigger */
    label?: string | number
    /** If button should take up full width of parent container */
    fluid?: boolean
    /**
     * Element type to render. This needs to be a react component that extends ButtonProps
     */
    elementType?: React.ForwardRefExoticComponent<
        ToolbarButtonProps & React.RefAttributes<HTMLButtonElement | undefined>
    >
}

export type ToolbarDropdownMenuProps = Omit<
    DropdownMenuProps,
    'children' | 'trigger'
> & {
    /** Label when dropdown is rendered as accordion in more menu */
    label: string
    /** Icon when dropdown is rendered as accordion in more menu */
    icon?: React.ReactElement<IconProps>
    /** Must be one or more of the allowed ListItem types */
    children: React.ReactNode | React.ReactNode[]
    /**
     * Target display of this item. Choose 'phone' to prevent collapsing.
     */
    displayOn?: DisplayOnType

    /**
     * Trigger of the dropdown. Union of TriggerConfig and function to return React.JSX.Element
     **/
    trigger:
        | TriggerConfig
        | ((
              props: DropdownTriggerProps
          ) => React.ReactElement<ToolbarButtonProps>)
}

type DropdownTriggerElementInternal = React.ForwardRefExoticComponent<
    ButtonProps & React.RefAttributes<HTMLButtonElement | undefined>
>

/**
 *
 * `import { ToolbarDropdownMenu } from '@planview/pv-toolbar'`
 *
 */
export const ToolbarDropdownMenu = React.memo(
    ({
        children,
        displayOn = DISPLAY_ON_TABLET_PORTRAIT,
        trigger,
        ...props
    }: ToolbarDropdownMenuProps) => (
        <ToolbarItem displayOn={displayOn}>
            <ToolbarItemView>
                {() => (
                    <WrappingParentContext.Provider
                        value={{ wrappedInToolbarParent: true }}
                    >
                        <DropdownMenu
                            aria-label={props.label}
                            {...props}
                            trigger={
                                typeof trigger === 'function'
                                    ? trigger
                                    : {
                                          ...trigger,
                                          elementType:
                                              (trigger.elementType as DropdownTriggerElementInternal) ||
                                              (ToolbarButtonEmpty as DropdownTriggerElementInternal),
                                      }
                            }
                        >
                            {children}
                        </DropdownMenu>
                    </WrappingParentContext.Provider>
                )}
            </ToolbarItemView>
            <ToolbarItemCollapsedView>
                <SubMenu
                    key={`accordion-${props.label}`}
                    icon={props.icon}
                    label={props.label}
                >
                    {children}
                </SubMenu>
            </ToolbarItemCollapsedView>
        </ToolbarItem>
    )
)
ToolbarDropdownMenu.displayName = 'ToolbarDropdownMenu'