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

import {
  PAGES,
  ProfileTypes,
} from 'config'

import { client } from 'config/clients'
import { isMobileDevice } from 'config/userAgent'

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

import { usePageParams } from 'hooks/usePageParams'
import { useProfileColor } from './hooks'

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

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

const profileWithImage = {
  316: 'Ligue 1',
  5704: 'NSDF Futsal Invitation Championship',
}

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

  const color = useProfileColor(profileId)
  // @ts-ignore
  const imageHeader = Boolean(profileWithImage[profileId])
    && sportType === 1
    && profileType === ProfileTypes.TOURNAMENTS ? `/images/${profileId}` : headerImage

  return (
    <Fragment>
      <HeaderStyled
        headerImage={imageHeader}
        color={headerColor || color}
        height={height}
      >
        <Position
          top={client.styles.logoTop}
          left={client.styles.logoLeft}
        >
          <HeaderGroup>
            <Link to={PAGES.home}>
              <HeaderLogo />
            </Link>

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

        {children}

        <Position top={isMobileDevice ? client.styles.logoTop : undefined} right={0.71}>
          <HeaderGroup>
            {!isMobileDevice ? <ScoreSwitch /> : null}
            <Menu />
          </HeaderGroup>
        </Position>
      </HeaderStyled>
    </Fragment>
  )
}