import { Fragment } from 'react'
import type { ReactNode } from 'react'
import { Link } from 'react-router-dom'

import { PAGES } from 'config'

import { client } from 'config/clients'

import { Menu } from 'features/Menu'
import { Search } from 'features/Search'
import { ScoreSwitch } from 'features/MatchSwitches'

import { isMatchPage } from 'helpers/isMatchPage'

import {
  HeaderStyled,
  HeaderGroup,
  HeaderLogo,
  Position,
} from './styled'
import { useProfileColor } from './hooks'

type Props = {
  children?: ReactNode,
  color?: string,
  headerImage?: string | null,
  height?: number,
  profileId?: number,
}

export const ProfileHeader = ({
  children,
  color: headerColor,
  headerImage,
  height,
  profileId,
}: Props) => {
  const color = useProfileColor(profileId)

  return (
    <Fragment>
      <HeaderStyled
        headerImage={headerImage}
        color={headerColor || color}
        height={height}
      >
        <Position isMatchPage={isMatchPage()} left={1.7}>
          <HeaderGroup marginTop={0.19}>
            <Link to={PAGES.home}>
              <HeaderLogo isMatchPage={isMatchPage()} />
            </Link>

            {client.showSearch && <Search />}
          </HeaderGroup>
        </Position>

        {children}

        <Position right={0.71}>
          <HeaderGroup height={2.28}>
            <ScoreSwitch />
            <Menu />
          </HeaderGroup>
        </Position>
      </HeaderStyled>
    </Fragment>
  )
}