import React, { Fragment } from 'react'
import { Route, Switch } from 'react-router-dom'

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

import {
  DateFilter,
  MatchStatusFilter,
  SportTypeFilter,
  TournamentFilter,
} from 'features/HeaderFilters'

import { PAGES } from 'config'

import {
  Wrapper,
  FilterWrapper,
  HomeButtonLink,
  SearchWrapper,
  SportFilterWrapper,
  MenuWrapper,
} from './styled'

export const Header = () => (
  <Wrapper>
    <Switch>
      <Route path={PAGES.home} exact>
        <MenuWrapper>
          <Menu />
        </MenuWrapper>

        <SearchWrapper>
          <Search />
        </SearchWrapper>

        <FilterWrapper>
          <DateFilter />
        </FilterWrapper>

        <FilterWrapper>
          <MatchStatusFilter />
        </FilterWrapper>

        <SportFilterWrapper>
          <SportTypeFilter />
          <TournamentFilter />
        </SportFilterWrapper>
      </Route>

      <Fragment>
        <MenuWrapper>
          <Menu />
          <HomeButtonLink to={PAGES.home} />
        </MenuWrapper>
        <SearchWrapper>
          <Search />
        </SearchWrapper>
      </Fragment>
    </Switch>
  </Wrapper>
)