import Icon, {
  CarFilled,
  FileAddFilled,
  FileFilled,
  GlobalOutlined,
  HomeFilled,
  TeamOutlined,
  DollarCircleFilled,
} from "@ant-design/icons";
import { Avatar, Col, Menu, Row } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { FaCalendarAlt, FaCarCrash } from "react-icons/fa";
import { Link } from "react-router-dom";
import UserImage from "../../assets/User.svg";
import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setModalContext } from "../../redux/modals/modals.actions";
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
  setInvoiceEnterContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
  setTimeTicketContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "timeTicket" })),
});

function Header({
  landingHeader,
  selectedNavItem,
  logo,
  handleMenuClick,
  currentUser,
  signOutStart,
  setInvoiceEnterContext,
  setTimeTicketContext,
}) {
  const { t } = useTranslation();
  //TODO Add

  return (
    <Row type="flex" justify="space-around" align="middle">
      {logo ? (
        <Col span={3}>
          <img alt="Shop Logo" src={logo} style={{ height: "40px" }} />
        </Col>
      ) : null}
      <Col span={21}>
        {landingHeader ? (
          <Menu
            theme="dark"
            className="header"
            selectedKeys={selectedNavItem}
            mode="horizontal"
            onClick={handleMenuClick}
          >
            <ManageSignInButton />

            <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>
                    <GlobalOutlined />
                    <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-CA">
                  {t("general.languages.french")}
                </Menu.Item>
                <Menu.Item actiontype="lang-select" key="es-MX">
                  {t("general.languages.spanish")}
                </Menu.Item>
              </Menu.SubMenu>
            </Menu.SubMenu>
          </Menu>
        ) : (
          <Menu
            theme="dark"
            className="header"
            selectedKeys={selectedNavItem}
            mode="horizontal"
            onClick={handleMenuClick}
          >
            <Menu.Item key="home">
              <Link to="/manage">
                <HomeFilled />
                {t("menus.header.home")}
              </Link>
            </Menu.Item>
            <Menu.SubMenu
              title={
                <span>
                  <Icon component={FaCarCrash} />
                  <span>{t("menus.header.jobs")}</span>
                </span>
              }
            >
              <Menu.Item key="schedule">
                <Link to="/manage/schedule">
                  <Icon component={FaCalendarAlt} />
                  {t("menus.header.schedule")}
                </Link>
              </Menu.Item>
              <Menu.Item key="production">
                <Link to="/manage/production/list">
                  <Icon component={FaCalendarAlt} />
                  {t("menus.header.productionlist")}
                </Link>
              </Menu.Item>
              <Menu.Item key="activejobs">
                <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
              </Menu.Item>
              <Menu.Item key="alljobs">
                <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</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">
                  <TeamOutlined />
                  {t("menus.header.owners")}
                </Link>
              </Menu.Item>
              <Menu.Item key="vehicles">
                <Link to="/manage/vehicles">
                  <CarFilled />
                  {t("menus.header.vehicles")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>

            <Menu.SubMenu
              title={
                <span>
                  <CarFilled />
                  <span>{t("menus.header.courtesycars")}</span>
                </span>
              }
            >
              <Menu.Item key="courtesycarsall">
                <Link to="/manage/courtesycars">
                  <CarFilled />
                  {t("menus.header.courtesycars-all")}
                </Link>
              </Menu.Item>
              <Menu.Item key="contracts">
                <Link to="/manage/courtesycars/contracts">
                  <FileFilled />
                  {t("menus.header.courtesycars-contracts")}
                </Link>
              </Menu.Item>
              <Menu.Item key="newcontract">
                <Link to="/manage/courtesycars/contracts/new">
                  <FileAddFilled />
                  {t("menus.header.courtesycars-newcontract")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>

            <Menu.SubMenu
              title={
                <span>
                  <DollarCircleFilled />
                  <span>{t("menus.header.accounting")}</span>
                </span>
              }
            >
              <Menu.Item
                key="enterinvoices"
                onClick={() => {
                  setInvoiceEnterContext({
                    actions: {},
                    context: {},
                  });
                }}
              >
                {t("menus.header.enterinvoices")}
              </Menu.Item>
              <Menu.Item key="invoices">
                <Link to="/manage/invoices">{t("menus.header.invoices")}</Link>
              </Menu.Item>
              <Menu.Item
                key="entertimetickets"
                onClick={() => {
                  setTimeTicketContext({
                    actions: {},
                    context: {},
                  });
                }}
              >
                {t("menus.header.entertimeticket")}
              </Menu.Item>
              <Menu.Item key="receivables">
                <Link to="/manage/accounting/receivables">
                  {t("menus.header.accounting-receivables")}
                </Link>
              </Menu.Item>
              <Menu.Item key="payables">
                <Link to="/manage/accounting/payables">
                  {t("menus.header.accounting-payables")}
                </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-templates">
                <Link to="/manage/shop/templates">
                  {t("menus.header.shop_templates")}
                </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>
                    <GlobalOutlined />
                    <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-CA">
                  {t("general.languages.french")}
                </Menu.Item>
                <Menu.Item actiontype="lang-select" key="es-MX">
                  {t("general.languages.spanish")}
                </Menu.Item>
              </Menu.SubMenu>
            </Menu.SubMenu>
          </Menu>
        )}
      </Col>
    </Row>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);