import { Link } from 'react-router-dom'

import { PAGES } from 'config/pages'
import { client, isFacrClient } from 'config/clients'

import { Menu } from 'features/Menu'
import { ScoreSwitch } from 'features/MatchSwitches'
import { Search } from 'features/Search'
import {
  DateFilter,
  useHeaderFiltersStore,
  FacrDateFilter,
} from 'features/HeaderFilters'

import {
  HeaderStyled,
  HeaderGroup,
  HeaderLogo,
  Position,
} from 'features/ProfileHeader/styled'

export const Header = () => {
  const {
    resetFilters,
    updateDate,
  } = useHeaderFiltersStore()

  return (
    <HeaderStyled>
      <Position
        top={client.styles.logoTop}
        left={client.styles.logoLeft}
      >
        <HeaderGroup>
          <Link
            to={PAGES.home}
            onClick={() => {
              updateDate()
              resetFilters()
            }}
            id='general_main_page'
          >
            <HeaderLogo />
          </Link>
          <Search />
        </HeaderGroup>
      </Position>
      {isFacrClient ? <FacrDateFilter /> : <DateFilter />}
      <Position right={0.71}>
        <HeaderGroup>
          <ScoreSwitch />
          <Menu />
        </HeaderGroup>
      </Position>
    </HeaderStyled>
  )
}