import classNames from 'classnames'
import HorizontalMenuContent from '@/components/template/HorizontalMenuContent'
import { NAV_MODE_THEMED } from '@/constants/theme.constant'
import useResponsive from '@/utils/hooks/useResponsive'
import { useStoreState } from '@/store'
import type { CommonProps } from '@/proxy/common'

interface SecondaryHeaderProps extends CommonProps {
  contained: boolean
}

const SecondaryHeader = (props: SecondaryHeaderProps) => {
  const { className, contained } = props

  const navMode = useStoreState((state) => state.theme.navMode)
  const themeColor = useStoreState((state) => state.theme.themeColor)
  const primaryColorLevel = useStoreState((state) => state.theme.primaryColorLevel)
  const userAuthority = useStoreState((state) => state.auth.user.authority)

  const { larger } = useResponsive()

  const headerColor = () => {
    if (navMode === NAV_MODE_THEMED) {
      return `bg-${themeColor}-${primaryColorLevel} secondary-header-${navMode}`
    }
    return `secondary-header-${navMode}`
  }

  return (
    <>
      {larger.md && (
        <div className={classNames('flex items-center py-1', headerColor(), className)}>
          <div className={classNames('flex items-center px-2', contained && 'container mx-auto')}>
            <HorizontalMenuContent manuVariant={navMode} userAuthority={userAuthority} />
          </div>
        </div>
      )}
    </>
  )
}

export default SecondaryHeader