import { PAGES } from 'config'
import { isMobileDevice } from 'config/userAgent'

import { usePageLogger } from 'hooks/usePageLogger'

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 { useHomePage } from './hooks'
import { Header } from './components/Header'
import { HeaderMobile } from '../HeaderMobile'
import { HeaderFilters } from './components/HeaderFilters'

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

  return (
    <PageWrapper>
      {isMobileDevice ? (
        <HeaderMobile
          isOpenDownload={isOpenDownload}
          setIsOpenDownload={setIsOpenDownload}
        />
      ) : (
        <Header disabled={Boolean(filtersListName)} />
      )}
      <Main>
        <UserFavorites />
        <Content>
          {isMobileDevice ? null : <HeaderFilters />}
          <Matches fetch={fetchMatches} />
          <ConfirmPopup
            isModalOpen={isShowConfirmPopup}
            handleModalClose={handleCloseConfirmPopup}
          />
        </Content>
      </Main>
    </PageWrapper>
  )
}

const HomePage = () => (
  <HeaderFiltersStore>
    <Home />
  </HeaderFiltersStore>
)

export default HomePage