import React from "react";
import { Link } from "react-router-dom";
import { useApolloClient } from "@apollo/react-hooks";
import { Menu, Icon } from "antd";
import "./header.styles.scss";

import SignOut from "../sign-out/sign-out.component";
import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
import GlobalSearch from "../global-search/global-search.component";
import LanguageSelector from "../language-selector/langauge-selector.component";

export default ({ landingHeader, navItems, selectedNavItem }) => {
  const apolloClient = useApolloClient();


  const handleClick = e => {
    apolloClient.writeData({ data: { selectedNavItem: e.key } });
  };
  return (
    <Menu
      theme='dark'
      className='header'
      onClick={handleClick}
      selectedKeys={selectedNavItem}
      mode='horizontal'>
      <Menu.Item>
        <GlobalSearch />
      </Menu.Item>
      {navItems.map(navItem => (
        <Menu.Item key={navItem.title}>
          <Link to={navItem.path}>
            {navItem.icontype ? <Icon type={navItem.icontype} /> : null}
            {navItem.title}
          </Link>
        </Menu.Item>
      ))}

      {!landingHeader ? (
        <Menu.Item>
          <SignOut />
        </Menu.Item>
      ) : (
        <Menu.Item>
          <ManageSignInButton />
        </Menu.Item>
      )}

      {!landingHeader ? <LanguageSelector /> : null}
    </Menu>
  );
};