import Icon, {
  BankFilled,
  BarChartOutlined,
  CarFilled,
  CheckCircleOutlined,
  ClockCircleFilled,
  DashboardFilled,
  DollarCircleFilled,
  ExportOutlined,
  FieldTimeOutlined,
  FileAddFilled,
  FileAddOutlined,
  FileFilled,
  //GlobalOutlined,
  HomeFilled,
  ImportOutlined,
  LineChartOutlined,
  PaperClipOutlined,
  PhoneOutlined,
  QuestionCircleFilled,
  ScheduleOutlined,
  SettingOutlined,
  TeamOutlined,
  ToolFilled,
  UnorderedListOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { useTreatments } from "@splitsoftware/splitio-react";
import { Layout, 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 { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
import { IoBusinessOutline } from "react-icons/io5";
import { RiSurveyLine } from "react-icons/ri";
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 {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  recentItems: selectRecentItems,
  selectedHeader: selectSelectedHeader,
  bodyshop: selectBodyshop,
});

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,
  bodyshop,
  selectedHeader,
  signOutStart,
  setBillEnterContext,
  setTimeTicketContext,
  setPaymentContext,
  setReportCenterContext,
  recentItems,
}) {
  const { Simple_Inventory } = useTreatments(
    ["Simple_Inventory"],
    {},
    bodyshop && bodyshop.imexshopid
  );
  const { DmsAp } = useTreatments(
    ["DmsAp"],
    {},
    bodyshop && bodyshop.imexshopid
  );

  const { t } = useTranslation();

  return (
    <Layout.Header>
      <Menu
        mode="horizontal"
        //theme="light"
        theme={"dark"}
        selectedKeys={[selectedHeader]}
        onClick={handleMenuClick}
        subMenuCloseDelay={0.3}
      >
        <Menu.Item key="home" icon={<HomeFilled />}>
          <Link to="/manage">{t("menus.header.home")}</Link>
        </Menu.Item>
        <Menu.Item key="schedule" icon={<Icon component={FaCalendarAlt} />}>
          <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
        </Menu.Item>
        <Menu.SubMenu
          key="jobssubmenu"
          icon={<Icon component={FaCarCrash} />}
          title={t("menus.header.jobs")}
        >
          <Menu.Item key="activejobs" icon={<FileFilled />}>
            <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
          </Menu.Item>
          <Menu.Item key="readyjobs" icon={<CheckCircleOutlined />}>
            <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
          </Menu.Item>
          <Menu.Item key="parts-queue" icon={<ToolFilled />}>
            <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
          </Menu.Item>
          <Menu.Item key="availablejobs" icon={<ImportOutlined />}>
            <Link to="/manage/available">
              {t("menus.header.availablejobs")}
            </Link>
          </Menu.Item>
          <Menu.Item key="newjob" icon={<FileAddOutlined />}>
            <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
          </Menu.Item>
          <Menu.Divider key="div1" />
          <Menu.Item key="alljobs" icon={<UnorderedListOutlined />}>
            <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
          </Menu.Item>
          <Menu.Divider key="div2" />
          <Menu.Item key="productionlist" icon={<ScheduleOutlined />}>
            <Link to="/manage/production/list">
              {t("menus.header.productionlist")}
            </Link>
          </Menu.Item>
          <Menu.Item key="productionboard" icon={<Icon component={BsKanban} />}>
            <Link to="/manage/production/board">
              {t("menus.header.productionboard")}
            </Link>
          </Menu.Item>
          <Menu.Divider key="div3" />
          <Menu.Item key="scoreboard" icon={<LineChartOutlined />}>
            <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
          </Menu.Item>
        </Menu.SubMenu>
        <Menu.SubMenu
          key="customers"
          icon={<UserOutlined />}
          title={t("menus.header.customers")}
        >
          <Menu.Item key="owners" icon={<TeamOutlined />}>
            <Link to="/manage/owners">{t("menus.header.owners")}</Link>
          </Menu.Item>
          <Menu.Item key="vehicles" icon={<CarFilled />}>
            <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
          </Menu.Item>
        </Menu.SubMenu>
        <Menu.SubMenu
          key="ccs"
          icon={<CarFilled />}
          title={t("menus.header.courtesycars")}
        >
          <Menu.Item key="courtesycarsall" icon={<CarFilled />}>
            <Link to="/manage/courtesycars">
              {t("menus.header.courtesycars-all")}
            </Link>
          </Menu.Item>
          <Menu.Item key="contracts" icon={<FileFilled />}>
            <Link to="/manage/courtesycars/contracts">
              {t("menus.header.courtesycars-contracts")}
            </Link>
          </Menu.Item>
          <Menu.Item key="newcontract" icon={<FileAddFilled />}>
            <Link to="/manage/courtesycars/contracts/new">
              {t("menus.header.courtesycars-newcontract")}
            </Link>
          </Menu.Item>
        </Menu.SubMenu>
        <Menu.SubMenu
          key="accounting"
          icon={<DollarCircleFilled />}
          title={t("menus.header.accounting")}
        >
          <Menu.Item
            key="bills"
            icon={<Icon component={FaFileInvoiceDollar} />}
          >
            <Link to="/manage/bills">{t("menus.header.bills")}</Link>
          </Menu.Item>
          <Menu.Item
            key="enterbills"
            icon={<Icon component={GiPayMoney} />}
            onClick={() => {
              setBillEnterContext({
                actions: {},
                context: {},
              });
            }}
          >
            {t("menus.header.enterbills")}
          </Menu.Item>
          {Simple_Inventory.treatment === "on" && (
            <>
              <Menu.Divider key="div4" />
              <Menu.Item
                key="inventory"
                icon={<Icon component={FaFileInvoiceDollar} />}
              >
                <Link to="/manage/inventory">
                  {t("menus.header.inventory")}
                </Link>
              </Menu.Item>
            </>
          )}
          <Menu.Divider key="div7" />
          <Menu.Item key="allpayments" icon={<BankFilled />}>
            <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
          </Menu.Item>
          <Menu.Item
            key="enterpayments"
            onClick={() => {
              setPaymentContext({
                actions: {},
                context: null,
              });
            }}
            icon={<Icon component={FaCreditCard} />}
          >
            {t("menus.header.enterpayment")}
          </Menu.Item>
          <Menu.Divider key="div5" />
          <Menu.Item key="timetickets" icon={<FieldTimeOutlined />}>
            <Link to="/manage/timetickets">
              {t("menus.header.timetickets")}
            </Link>
          </Menu.Item>
          <Menu.Item
            key="entertimetickets"
            icon={<Icon component={GiPlayerTime} />}
            onClick={() => {
              setTimeTicketContext({
                actions: {},
                context: {
                  created_by: currentUser.displayName
                    ? currentUser.email.concat(" | ", currentUser.displayName)
                    : currentUser.email,
                },
              });
            }}
          >
            {t("menus.header.entertimeticket")}
          </Menu.Item>
          <Menu.Divider key="div6" />
          <Menu.SubMenu
            key="accountingexport"
            title={t("menus.header.export")}
            icon={<ExportOutlined />}
          >
            <Menu.Item key="receivables">
              <Link to="/manage/accounting/receivables">
                {t("menus.header.accounting-receivables")}
              </Link>
            </Menu.Item>
            {(!(
              (bodyshop && bodyshop.cdk_dealerid) ||
              (bodyshop && bodyshop.pbs_serialnumber)
            ) ||
              DmsAp.treatment === "on") && (
              <Menu.Item key="payables">
                <Link to="/manage/accounting/payables">
                  {t("menus.header.accounting-payables")}
                </Link>
              </Menu.Item>
            )}
            {!(
              (bodyshop && bodyshop.cdk_dealerid) ||
              (bodyshop && bodyshop.pbs_serialnumber)
            ) && (
              <Menu.Item key="payments">
                <Link to="/manage/accounting/payments">
                  {t("menus.header.accounting-payments")}
                </Link>
              </Menu.Item>
            )}
            <Menu.Item key="export-logs">
              <Link to="/manage/accounting/exportlogs">
                {t("menus.header.export-logs")}
              </Link>
            </Menu.Item>
          </Menu.SubMenu>
        </Menu.SubMenu>
        <Menu.Item key="phonebook" icon={<PhoneOutlined />}>
          <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
        </Menu.Item>
        <Menu.Item key="temporarydocs" icon={<PaperClipOutlined />}>
          <Link to="/manage/temporarydocs">
            {t("menus.header.temporarydocs")}
          </Link>
        </Menu.Item>
        <Menu.SubMenu
          key="shopsubmenu"
          title={t("menus.header.shop")}
          icon={<SettingOutlined />}
        >
          <Menu.Item key="shop" icon={<Icon component={GiSettingsKnobs} />}>
            <Link to="/manage/shop?tab=info">
              {t("menus.header.shop_config")}
            </Link>
          </Menu.Item>
          <Menu.Item key="dashboard" icon={<DashboardFilled />}>
            <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
          </Menu.Item>
          <Menu.Item
            key="reportcenter"
            icon={<BarChartOutlined />}
            onClick={() => {
              setReportCenterContext({
                actions: {},
                context: {},
              });
            }}
          >
            {t("menus.header.reportcenter")}
          </Menu.Item>
          <Menu.Item
            key="shop-vendors"
            icon={<Icon component={IoBusinessOutline} />}
          >
            <Link to="/manage/shop/vendors">
              {t("menus.header.shop_vendors")}
            </Link>
          </Menu.Item>
          <Menu.Item key="shop-csi" icon={<Icon component={RiSurveyLine} />}>
            <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
          </Menu.Item>
        </Menu.SubMenu>
        <Menu.SubMenu
          key="user"
          title={
            currentUser.displayName ||
            currentUser.email ||
            t("general.labels.unknown")
          }
        >
          <Menu.Item key="signout" danger onClick={() => signOutStart()}>
            {t("user.actions.signout")}
          </Menu.Item>
          <Menu.Item
            key="help"
            onClick={() => {
              window.open("https://help.imex.online/", "_blank");
            }}
            icon={<Icon component={QuestionCircleFilled} />}
          >
            {t("menus.header.help")}
          </Menu.Item>
          <Menu.Item
            key="rescue"
            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
            //           key="langselecter"
            //           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 key="recent" title={<ClockCircleFilled />}>
          {recentItems.map((i, idx) => (
            <Menu.Item key={idx}>
              <Link to={i.url}>{i.label}</Link>
            </Menu.Item>
          ))}
        </Menu.SubMenu>
      </Menu>
    </Layout.Header>
  );
}

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