import React from 'react'
import { useSelector } from 'react-redux'

import { selectIsAnonymousUser } from '../../store/selectors/selectIsAnonymousUser'

import {
  DiagnosticsPageIcon,
  EventsPageIcon,
  LinkContainer,
  HeaderContainer,
  SegmentLogo,
  StyledButtonLink,
  UserPageIcon,
  HelpLink
} from './style'


export const Header = () => {
  const isIdentified = !useSelector(selectIsAnonymousUser)

  return (
    <HeaderContainer>
      <SegmentLogo />
      <LinkContainer>
        <StyledButtonLink aria-label='View diagnostics' to='/diagnostics'>
          <DiagnosticsPageIcon />
        </StyledButtonLink>
        <StyledButtonLink aria-label='View events' to='/events'>
          <EventsPageIcon />
        </StyledButtonLink>
        <StyledButtonLink aria-label='View user' to='/user'>
          <UserPageIcon identified={isIdentified} />
        </StyledButtonLink>
      </LinkContainer>
      <HelpLink title='Contact support' href='slack://channel?id=C03DETM0GHG&team=T024FJ1MS' />
    </HeaderContainer>
  )
}