import { ReactNode } from 'react'
import { Text } from '../Text/index.js'
import { colors } from '../../utils/colors.js'
import { IconButton } from '../IconButton/index.js'

type AppHeaderProps = {
  children: ReactNode
}

function AppHeader({ children }: AppHeaderProps) {
  return (
    <div
      style={{
        flexShrink: 0,
        width: '100%',
        height: 68,
        padding: '0 20px',
        display: 'flex',
        alignItems: 'center', 
        zIndex: 3,
        background: colors.neutralInverted60,
        backdropFilter: "blur(24px)",
        WebkitBackdropFilter: "blur(24px)",
        borderBottom: `1px solid ${colors.neutral20Adjusted}`,
      }}
    >
      {children}
    </div>
  )
}

type AppHeaderTitleProps = {
  children: ReactNode
}

function AppHeaderTitle({ children }: AppHeaderTitleProps) {
  return (
    <Text variant="subheading-bold" singleLine>
      {children}
    </Text>
  )
}

type AppHeaderContentProps = {
  children: ReactNode
}

function AppHeaderRight({ children }: AppHeaderContentProps) {
  return (
    <AppHeaderItems position='right'>
      {children}
    </AppHeaderItems>
  )
}

function AppHeaderLeft({ children }: AppHeaderContentProps) {
  return (
    <AppHeaderItems position='left'>
      {children}
    </AppHeaderItems>
  )
}

type AppHeaderItemsProps = {
  children: ReactNode,
  position: 'left' | 'right'
}

function AppHeaderItems({ children, position }: AppHeaderItemsProps) {
  return (
    <div
      style={{
        ...(position === 'right' && { marginLeft: 'auto' }),
        ...(position === 'left' && { marginLeft: '20px' }),
        display: 'flex',
        alignItems: 'center',
        gap: 12,
      }}
    >
      {children}
    </div>
  )
}

type AppHeaderSeparatorProps = {}

function AppHeaderSeparator(_: AppHeaderSeparatorProps) {
  return (
    <div
      style={{
        height: 16,
        width: 1,
        background: colors.neutral10,
      }}
    />
  )
}

type AppHeaderBackButtonProps = {
  onClick: () => void
}

function AppHeaderBackButton({ onClick }: AppHeaderBackButtonProps) {
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: 12,
      }}
    >
      <IconButton icon="arrow-left" onClick={onClick} />
    </div>
  )
}

AppHeader.Title = AppHeaderTitle
AppHeader.Right = AppHeaderRight
AppHeader.Left = AppHeaderLeft
AppHeader.Separator = AppHeaderSeparator
AppHeader.BackButton = AppHeaderBackButton

export { AppHeader }
export type { AppHeaderProps }
