import Icon, {
  CarFilled,
  ClockCircleFilled,
  DollarCircleFilled,
  FileAddFilled,
  FileFilled,
  GlobalOutlined,
  HomeFilled,
  ImportOutlined,
  LineChartOutlined,
  ScheduleOutlined,
  TeamOutlined,
  ToolFilled,
  UnorderedListOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Avatar, Menu } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { BsKanban } from "react-icons/bs";
import {
  FaCalendarAlt,
  FaCarCrash,
  FaCreditCard,
  FaFileInvoiceDollar,
} from "react-icons/fa";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import {
  selectRecentItems,
  selectSelectedHeader,
} from "../../redux/application/application.selectors";
import { setModalContext } from "../../redux/modals/modals.actions";
import { signOutStart } from "../../redux/user/user.actions";
import { selectCurrentUser } from "../../redux/user/user.selectors";
import GlobalSearch from "../global-search/global-search.component";
const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  recentItems: selectRecentItems,
  selectedHeader: selectSelectedHeader,
});

const mapDispatchToProps = (dispatch) => ({
  setBillEnterContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "billEnter" })),
  setTimeTicketContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "timeTicket" })),
  setPaymentContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "payment" })),
  setReportCenterContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "reportCenter" })),
  signOutStart: () => dispatch(signOutStart()),
});

function Header({
  handleMenuClick,
  currentUser,
  selectedHeader,
  signOutStart,
  setBillEnterContext,
  setTimeTicketContext,
  setPaymentContext,
  setReportCenterContext,
  recentItems,
}) {
  const { t } = useTranslation();

  return (
    <div style={{ display: "flex", alignItems: "center" }}>
      <Menu
        mode="horizontal"
        theme="dark"
        style={{ flex: 5 }}
        selectedKeys={[selectedHeader]}
        onClick={handleMenuClick}
        subMenuCloseDelay={0.3}
      >
        <Menu.Item key="home">
          <Link to="/manage">
            <HomeFilled />
            {t("menus.header.home")}
          </Link>
        </Menu.Item>
        <Menu.Item key="schedule">
          <Link to="/manage/schedule">
            <Icon component={FaCalendarAlt} />
            {t("menus.header.schedule")}
          </Link>
        </Menu.Item>
        <Menu.SubMenu
          title={
            <span>
              <Icon component={FaCarCrash} />
              <span>{t("menus.header.jobs")}</span>
            </span>
          }
        >
          <Menu.Item key="activejobs">
            <FileFilled />
            <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
          </Menu.Item>
          <Menu.Item key="parts-queue">
            <Link to="/manage/partsqueue">
              <ToolFilled /> {t("menus.header.parts-queue")}
            </Link>
          </Menu.Item>
          <Menu.Item key="availablejobs">
            <Link to="/manage/available">
              <ImportOutlined /> {t("menus.header.availablejobs")}
            </Link>
          </Menu.Item>
          <Menu.Divider />
          <Menu.Item key="alljobs">
            <UnorderedListOutlined />
            <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
          </Menu.Item>
          <Menu.Divider />

          <Menu.Item key="productionlist">
            <Link to="/manage/production/list">
              <ScheduleOutlined />
              {t("menus.header.productionlist")}
            </Link>
          </Menu.Item>
          <Menu.Item key="productionboard">
            <Link to="/manage/production/board">
              <Icon component={BsKanban} />
              {t("menus.header.productionboard")}
            </Link>
          </Menu.Item>
          <Menu.Divider />

          <Menu.Item key="scoreboard">
            <LineChartOutlined />
            <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
          </Menu.Item>
        </Menu.SubMenu>
        <Menu.SubMenu
          title={
            <span>
              <UserOutlined />
              <span>{t("menus.header.customers")}</span>
            </span>
          }
        >
          <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="bills">
            <Link to="/manage/bills">{t("menus.header.bills")}</Link>
          </Menu.Item>
          <Menu.Item
            key="enterbills"
            onClick={() => {
              setBillEnterContext({
                actions: {},
                context: {},
              });
            }}
          >
            <Icon component={FaFileInvoiceDollar} />
            {t("menus.header.enterbills")}
          </Menu.Item>
          <Menu.Divider />
          <Menu.Item key="allpayments">
            <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
          </Menu.Item>
          <Menu.Item
            key="enterpayments"
            onClick={() => {
              setPaymentContext({
                actions: {},
                context: null,
              });
            }}
          >
            <Icon component={FaCreditCard} />
            {t("menus.header.enterpayment")}
          </Menu.Item>
          <Menu.Divider />

          <Menu.Item key="timetickets">
            <Link to="/manage/timetickets">
              {t("menus.header.timetickets")}
            </Link>
          </Menu.Item>
          <Menu.Item
            key="entertimetickets"
            onClick={() => {
              setTimeTicketContext({
                actions: {},
                context: {},
              });
            }}
          >
            {t("menus.header.entertimeticket")}
          </Menu.Item>
          <Menu.Divider />

          <Menu.SubMenu title={t("menus.header.export")}>
            <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.Item key="payments">
              <Link to="/manage/accounting/payments">
                {t("menus.header.accounting-payments")}
              </Link>
            </Menu.Item>
          </Menu.SubMenu>
        </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="temporarydocs">
            <Link to="/manage/temporarydocs">
              {t("menus.header.temporarydocs")}
            </Link>
          </Menu.Item>
          {
            // <Menu.Item key="shop-templates">
            //   <Link to="/manage/shop/templates">
            //     {t("menus.header.shop_templates")}
            //   </Link>
            // </Menu.Item>
          }
          <Menu.Item
            key="reportcenter"
            onClick={() => {
              setReportCenterContext({
                actions: {},
                context: {},
              });
            }}
          >
            {t("menus.header.reportcenter")}
          </Menu.Item>
          <Menu.Item key="shop-vendors">
            <Link to="/manage/shop/vendors">
              {t("menus.header.shop_vendors")}
            </Link>
          </Menu.Item>
          <Menu.Item key="shop-csi">
            <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
          </Menu.Item>
        </Menu.SubMenu>
      </Menu>
      <GlobalSearch />
      <Menu
        mode="horizontal"
        theme="dark"
        selectedKeys={[selectedHeader]}
        onClick={handleMenuClick}
      >
        <Menu.SubMenu
          title={
            <div>
              {currentUser.photoURL ? (
                <Avatar
                  src={currentUser.photoURL}
                  style={{
                    margin: "10px",
                  }}
                />
              ) : (
                <Avatar
                  style={{
                    backgroundColor: "#87d068",
                    margin: "10px",
                  }}
                  icon={<UserOutlined />}
                />
              )}

              {currentUser.displayName ||
                currentUser.email ||
                t("general.labels.unknown")}
            </div>
          }
        >
          <Menu.Item danger onClick={() => signOutStart()}>
            {t("user.actions.signout")}
          </Menu.Item>
          <Menu.Item
            onClick={() => {
              window.open("https://imexrescue.com/", "_blank");
            }}
          >
            {t("menus.header.rescueme")}
          </Menu.Item>
          <Menu.Item key="shiftclock">
            <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
          </Menu.Item>
          <Menu.Item key="profile">
            <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.SubMenu title={<ClockCircleFilled />}>
          {recentItems.map((i, idx) => (
            <Menu.Item key={idx}>
              <Link to={i.url}>{i.label}</Link>
            </Menu.Item>
          ))}
        </Menu.SubMenu>
      </Menu>
    </div>
  );
}

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