import { useRecoilValue } from 'recoil'

import { isAndroid, isIOS } from 'config/userAgent'
import { client, isLffClient } from 'config/clients'

import { HeaderMenu } from 'features/HeaderMenu'
import { DateFilter } from 'features/HeaderFilters'
import { ScoreSwitch } from 'features/MatchSwitches'
import { SportsFilter } from 'features/SportsFilter'
import { isSportFilterShownAtom } from 'features/HomePage/Atoms/HomePageAtoms'
import { SmartBanner } from 'components/SmartBanner'

import { UserInfo } from 'requests'

import {
  HeaderStyled,
  ScoreSwitchWrapper,
  ScSportsWrapper,
} from './styled'

type HeaderBannerProps = {
  isOpenDownload: boolean,
  setIsOpenDownload: (open: boolean) => void,
  userInfo?: UserInfo,
}

export const HeaderMobile = ({
  isOpenDownload,
  setIsOpenDownload,
  userInfo,
}: HeaderBannerProps) => {
  const isSportFilterShown = useRecoilValue(isSportFilterShownAtom)

  return (
    <>
      {
        isOpenDownload
        && (isAndroid || (isIOS && userInfo?.has_subscription))
          && client.showSmartBanner
        && <SmartBanner setIsOpenDownload={setIsOpenDownload} />
      }
      <HeaderStyled>
        <HeaderMenu />
        <DateFilter />
        <ScSportsWrapper>
          {!isLffClient && isSportFilterShown ? <SportsFilter /> : null}
          <ScoreSwitchWrapper>
            <ScoreSwitch />
          </ScoreSwitchWrapper>
        </ScSportsWrapper>
      </HeaderStyled>
    </>
  )
}