import React from 'react'
import styled from 'styled-components'
import { size, theme } from '@planview/pv-utilities'
import ResizeContext, { useMainNavigationContext } from '../utils/context'
import type { DividerProps } from '@planview/pv-uikit'
import { Divider } from '@planview/pv-uikit'

const StyledDivider = styled(Divider)<{ $inverse?: boolean }>`
    ${(props) => props.$inverse && `border-color: ${theme.borderNormal}`};
    height: ${size.xsmall}px;
`

export type BaseToolbarSeparatorProps = DividerProps & {
    $inverse?: boolean
}

export const BaseToolbarSeparator = (props: BaseToolbarSeparatorProps) => (
    <StyledDivider {...props} vertical />
)
/**
 *
 * `import { ToolbarSeparator, BaseToolbarSeparator } from '@planview/pv-toolbar'`
 *
 * Implementation of the [Toolbar Separator specification](https://design.planview.com/components/toolbar/toolbar-components#toolbar-separators)
 *
 * The difference between `ToolbarSeparator` and `BaseToolbarSeparator` is that the base version will not auto hide on narrower views.
 * The `ToolbarSeparator` is aware of context and will inverse if inside of a `NavigationBar` component to use correct color
 *
 * You should always prefer `ToolbarSeparator` over the base version.
 */
export const ToolbarSeparator = ({ ...otherProps }) => {
    const { showSeparators } = React.useContext(ResizeContext)
    const { wrappedInNavigation } = useMainNavigationContext()
    return showSeparators ? (
        <BaseToolbarSeparator {...otherProps} $inverse={wrappedInNavigation} />
    ) : null
}