import React from 'react'
import styled from 'styled-components'
import { RovingTabIndexProvider } from '../react-roving-tabindex'
import {
    spacing,
    align,
    size,
    theme,
    shadow,
    useResizeObserver,
} from '@planview/pv-utilities'
import { getBreakPoint, shouldDisplayAtBreakpoint } from '../utils'
import type { ResizeContextType } from '../utils/context'
import ResizeContext from '../utils/context'
import type { ToolbarSectionRightProps, ToolbarSectionLeft } from '../section'

export const ToolbarContainerElement = styled.div`
    position: relative;
    background-color: ${theme.backgroundNeutral50};
    height: ${size.medium}px;
    min-height: ${size.medium}px;
    width: 100%;
    z-index: 10;
    ${align.centerV};
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
    ${shadow.small};
    box-sizing: border-box;
    padding: 0 ${spacing.small}px;
`

export type BaseToolbarContainerProps = {
    /** Content of toolbar */
    children: React.ReactNode
    /** a11y: describe what the toolbar is controlling (e.g. "Boards tool") */
    'aria-label'?: string
} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'aria-label'>

const ToolbarContainerImpl: React.ForwardRefRenderFunction<
    HTMLDivElement,
    BaseToolbarContainerProps
> = ({ children, 'aria-label': ariaLabel, ...otherProps }, ref) => (
    <ToolbarContainerElement
        {...otherProps}
        ref={ref}
        aria-label={ariaLabel}
        role="toolbar"
    >
        {children}
    </ToolbarContainerElement>
)

export const BaseToolbarContainer = React.forwardRef(ToolbarContainerImpl)

export type ToolbarProps = {
    /** Toolbar-compatible children (the ones exported from this library). If mixing with custom elements, make sure they use display: flex */
    children:
        | React.ReactElement<React.ComponentProps<typeof ToolbarSectionLeft>>
        | [
              React.ReactElement<
                  React.ComponentProps<typeof ToolbarSectionLeft>
              >,
              React.ReactElement<ToolbarSectionRightProps>,
          ]

    /** class name to support styling */
    className?: string
    /** a11y: aria-label on wrapping element using role="toolbar" */
    label: string
}

const ToolbarImpl = ({ children, className, label }: ToolbarProps) => {
    const ref = React.useRef<HTMLDivElement>(null)
    const { width } = useResizeObserver({ ref })
    const { breakpoint, showLabels, showSeparators } = getBreakPoint(width)
    const initialized = !!width

    const resizeContext = React.useMemo<ResizeContextType>(
        () => ({
            initialized,
            breakpoint,
            showLabels,
            showSeparators,
            shouldDisplay: (displayOn) =>
                shouldDisplayAtBreakpoint(breakpoint, displayOn),
        }),
        [breakpoint, showLabels, showSeparators, initialized]
    )

    return (
        <BaseToolbarContainer
            aria-label={label}
            ref={ref}
            className={className}
        >
            <ResizeContext.Provider value={resizeContext}>
                <RovingTabIndexProvider
                    options={{
                        focusOnClick: false,
                        loopAround: false,
                    }}
                >
                    {children}
                </RovingTabIndexProvider>
            </ResizeContext.Provider>
        </BaseToolbarContainer>
    )
}
/**
 *
 * `import { Toolbar } from '@planview/pv-toolbar'`
 *
 * This is a strict implementation of the [Toolbar from the Planview Design system](https://design.planview.com/components/toolbar/toolbar). The component adopts the [WAI-ARIA toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) implementing roving tabindex and enforces certain design-system specific patterns.
 */
export const Toolbar = React.memo(ToolbarImpl)