import { usePageLogger } from 'hooks/usePageLogger'

import { ProfileHeader } from 'features/ProfileHeader'
import { UserFavorites } from 'features/UserFavorites'
import {
  PageWrapper,
  Main,
} from 'features/PageLayout'

import { SubscriptionGuard } from './components/SubscriptionGuard'
import { MatchProfileCard } from './components/MatchProfileCard'
import { FinishedMatch } from './components/FinishedMatch'
import { LiveMatch } from './components/LiveMatch'
import { useMatchProfile } from './hooks/useMatchProfile'
import { Wrapper } from './styled'

const MatchPage = () => {
  usePageLogger()
  const { events, profile } = useMatchProfile()

  const playFromScout = profile?.has_video && !profile?.live
  const playFromOTT = !profile?.has_video && (profile?.live || profile?.storage)

  return (
    <PageWrapper>
      <ProfileHeader color='rgb(0,0,0)' height={4.5}>
        <MatchProfileCard profile={profile} />
      </ProfileHeader>
      <Main>
        <UserFavorites />
        <SubscriptionGuard matchProfile={profile}>
          <Wrapper>
            {playFromOTT && <LiveMatch events={events} profile={profile} />}
            {playFromScout && <FinishedMatch events={events} profile={profile} />}
          </Wrapper>
        </SubscriptionGuard>
      </Main>
    </PageWrapper>
  )
}

export default MatchPage
