import { Avatar, Col, Icon, Menu, Row } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import UserImage from "../../assets/User.svg";
import { signOutStart } from "../../redux/user/user.actions";
import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";

export default ({
  landingHeader,
  selectedNavItem,
  logo,
  handleMenuClick,
  currentUser
}) => {
  const { t } = useTranslation();
  //TODO Add
  return (
    <Row type='flex' justify='space-around' align='middle'>
      {logo ? (
        <Col span={4}>
          <img alt='Shop Logo' src={logo} style={{ height: "40px" }} />
        </Col>
      ) : null}
      <Col span={14}>
        <Menu
          theme='dark'
          className='header'
          selectedKeys={selectedNavItem}
          mode='horizontal'
          onClick={handleMenuClick}>
          <Menu.Item key='home'>
            <Link to='/manage'>
              <Icon type='home' />
              {t("menus.header.home")}
            </Link>
          </Menu.Item>
          <Menu.SubMenu title={t("menus.header.jobs")}>
            <Menu.Item key='schedule'>
              <Link to='/manage/schedule'>
                <Icon type='calendar' />
                {t("menus.header.schedule")}
              </Link>
            </Menu.Item>
            <Menu.Item key='activejobs'>
              <Link to='/manage/jobs'>{t("menus.header.activejobs")}</Link>
            </Menu.Item>
            <Menu.Item key='availablejobs'>
              <Link to='/manage/available'>
                {t("menus.header.availablejobs")}
              </Link>
            </Menu.Item>
          </Menu.SubMenu>

          <Menu.SubMenu title={t("menus.header.customers")}>
            <Menu.Item key='owners'>
              <Link to='/manage/owners'>
                <Icon type='team' />
                {t("menus.header.owners")}
              </Link>
            </Menu.Item>
            <Menu.Item key='vehicles'>
              <Link to='/manage/vehicles'>
                <Icon type='car' />
                {t("menus.header.vehicles")}
              </Link>
            </Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu title={t("menus.header.shop")}>
            <Menu.Item key='shop'>
              <Link to='/manage/shop'>{t("menus.header.shop_config")}</Link>
            </Menu.Item>
            <Menu.Item key='shop-vendors'>
              <Link to='/manage/shop/vendors'>
                {t("menus.header.shop_vendors")}
              </Link>
            </Menu.Item>
          </Menu.SubMenu>

          <Menu.SubMenu
            title={
              <div>
                <Avatar
                  size='medium'
                  alt='Avatar'
                  src={currentUser.photoURL ? currentUser.photoURL : UserImage}
                  style={{ margin: "10px" }}
                />
                {currentUser.displayName || t("general.labels.unknown")}
              </div>
            }>
            <Menu.Item onClick={signOutStart()}>
              {t("user.actions.signout")}
            </Menu.Item>
            <Menu.Item>
              <Link to='/manage/profile'>{t("menus.currentuser.profile")}</Link>
            </Menu.Item>
            <Menu.SubMenu
              title={
                <span>
                  <Icon type='global' />
                  <span>{t("menus.currentuser.languageselector")}</span>
                </span>
              }>
              <Menu.Item actiontype='lang-select' key='en_us'>
                {t("general.languages.english")}
              </Menu.Item>
              <Menu.Item actiontype='lang-select' key='fr'>
                {t("general.languages.french")}
              </Menu.Item>
              <Menu.Item actiontype='lang-select' key='es'>
                {t("general.languages.spanish")}
              </Menu.Item>
            </Menu.SubMenu>
          </Menu.SubMenu>
        </Menu>
      </Col>
      <Col span={4}>{!landingHeader ? null : <ManageSignInButton />}</Col>
    </Row>
  );
};