import { PAGES, isMobileDevice } from 'config'

import { usePageLogger } from 'hooks'

import { ConfirmPopup } from 'features/AuthServiceApp/components/ConfirmPopup'
import { Matches } from 'features/Matches'
import {
  HeaderFiltersStore,
  useHeaderFiltersStore,
} from 'features/HeaderFilters'
import {
  PageWrapper,
  Main,
  Content,
} from 'features/PageLayout'
import { UserFavorites } from 'features/UserFavorites'
import { BuyMatchPopup } from 'features/BuyMatchPopup'
import { MatchesTimeline } from 'features/MatchesTimeline'

import { HEADER_MOBILE_ADS } from 'components/Ads/types'
import { HeaderAds } from 'components/Ads'

import { useHomePage } from './hooks'
import { Header } from './components/Header'
import { HeaderMobile } from '../HeaderMobile'
import { HeaderFilters } from './components/HeaderFilters'

const Home = () => {
  usePageLogger(PAGES.home)
  const {
    ads,
    fetchMatches,
    handleCloseConfirmPopup,
    isOpenDownload,
    isShowConfirmPopup,
    setIsOpenDownload,
    userInfo,
  } = useHomePage()

  const { isTimelineMode } = useHeaderFiltersStore()

  return (
    <PageWrapper>
      {isMobileDevice ? (
        <HeaderMobile
          isOpenDownload={isOpenDownload}
          setIsOpenDownload={setIsOpenDownload}
          userInfo={userInfo}
        />
      ) : (
        <Header />
      )}
      <Main>
        <UserFavorites />
        <Content>
          {!isMobileDevice && <HeaderFilters />}
          {userInfo?.email
            && ads
            && (
              <HeaderAds ads={
                isMobileDevice
                  ? ads.mobile?.filter(({ position }) => HEADER_MOBILE_ADS.includes(position.id))
                  : ads.header
              }
              />
            )}
          {isTimelineMode
            ? <MatchesTimeline />
            : <Matches fetch={fetchMatches} />}
          <ConfirmPopup
            isModalOpen={isShowConfirmPopup}
            handleModalClose={handleCloseConfirmPopup}
          />
        </Content>
      </Main>
    </PageWrapper>
  )
}

const HomePage = () => (
  <HeaderFiltersStore>
    <Home />
    {!isMobileDevice && <BuyMatchPopup />}
  </HeaderFiltersStore>
)

export default HomePage