import Icon, {
  BankFilled,
  BarChartOutlined,
  CarFilled,
  CheckCircleOutlined,
  ClockCircleFilled,
  DashboardFilled,
  DollarCircleFilled,
  ExportOutlined,
  FieldTimeOutlined,
  FileAddFilled,
  FileAddOutlined,
  FileFilled,
  HomeFilled,
  ImportOutlined,
  LineChartOutlined,
  PaperClipOutlined,
  PhoneOutlined,
  PlusCircleOutlined,
  QuestionCircleFilled,
  ScheduleOutlined,
  SettingOutlined,
  TeamOutlined,
  ToolFilled,
  UnorderedListOutlined,
  UserOutlined
} from "@ant-design/icons";
import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { Layout, Menu, Space } from "antd";
import { useTranslation } from "react-i18next";
import { BsKanban } from "react-icons/bs";
import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
import { FiLogOut } from "react-icons/fi";
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";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import LockWrapper from "../lock-wrapper/lock-wrapper.component";

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()),
  setCardPaymentContext: (context) =>
    dispatch(
      setModalContext({
        context: context,
        modal: "cardPayment"
      })
    ),
  setTaskUpsertContext: (context) =>
    dispatch(
      setModalContext({
        context: context,
        modal: "taskUpsert"
      })
    )
});

function Header({
  handleMenuClick,
  currentUser,
  bodyshop,
  selectedHeader,
  signOutStart,
  setBillEnterContext,
  setTimeTicketContext,
  setPaymentContext,
  setReportCenterContext,
  recentItems,
  setCardPaymentContext,
  setTaskUpsertContext
}) {
  const {
    treatments: { ImEXPay, DmsAp, Simple_Inventory }
  } = useSplitTreatments({
    attributes: {},
    names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
    splitKey: bodyshop && bodyshop.imexshopid
  });

  const { t } = useTranslation();

  // const deleteBetaCookie = () => {
  //   const cookieExists = document.cookie.split("; ").some((row) => row.startsWith(`betaSwitchImex=`));
  //   if (cookieExists) {
  //     const domain = window.location.hostname.split(".").slice(-2).join(".");
  //     document.cookie = `betaSwitchImex=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.${domain}`;
  //   }
  // };
  //
  // deleteBetaCookie();

  const accountingChildren = [];

  accountingChildren.push(
    {
      key: "bills",
      id: "header-accounting-bills",
      icon: <Icon component={FaFileInvoiceDollar} />,
      label: (
        <Link to="/manage/bills">
          <LockWrapper featureName="bills" bodyshop={bodyshop}>
            {t("menus.header.bills")}
          </LockWrapper>
        </Link>
      )
    },
    {
      key: "enterbills",
      id: "header-accounting-enterbills",
      icon: <Icon component={GiPayMoney} />,
      label: (
        <Space>
          <LockWrapper featureName="bills" bodyshop={bodyshop}>
            {t("menus.header.enterbills")}
          </LockWrapper>
        </Space>
      ),
      onClick: () => {
        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
          setBillEnterContext({
            actions: {},
            context: {}
          });
      }
    }
  );

  if (Simple_Inventory.treatment === "on") {
    accountingChildren.push(
      {
        type: "divider"
      },
      {
        key: "inventory",
        id: "header-accounting-inventory",
        icon: <Icon component={FaFileInvoiceDollar} />,
        label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
      }
    );
  }

  accountingChildren.push(
    {
      type: "divider"
    },
    {
      key: "allpayments",
      id: "header-accounting-allpayments",
      icon: <BankFilled />,
      label: (
        <Link to="/manage/payments">
          <LockWrapper featureName="payments" bodyshop={bodyshop}>
            {t("menus.header.allpayments")}
          </LockWrapper>
        </Link>
      )
    },
    {
      key: "enterpayments",
      id: "header-accounting-enterpayments",
      icon: <Icon component={FaCreditCard} />,
      label: (
        <LockWrapper featureName="payments" bodyshop={bodyshop}>
          {t("menus.header.enterpayment")}
        </LockWrapper>
      ),
      onClick: () => {
        HasFeatureAccess({ featureName: "payments", bodyshop }) &&
          setPaymentContext({
            actions: {},
            context: null
          });
      }
    }
  );

  if (ImEXPay.treatment === "on") {
    accountingChildren.push({
      key: "entercardpayments",
      id: "header-accounting-entercardpayments",
      icon: <Icon component={FaCreditCard} />,
      label: t("menus.header.entercardpayment"),
      onClick: () => {
        setCardPaymentContext({
          actions: {},
          context: {}
        });
      }
    });
  }

  accountingChildren.push(
    {
      type: "divider"
    },
    {
      key: "timetickets",
      id: "header-accounting-timetickets",
      icon: <FieldTimeOutlined />,
      label: (
        <Link to="/manage/timetickets">
          <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
            {t("menus.header.timetickets")}
          </LockWrapper>
        </Link>
      )
    }
  );

  if (bodyshop?.md_tasks_presets?.use_approvals) {
    accountingChildren.push({
      key: "ttapprovals",
      id: "header-accounting-ttapprovals",
      icon: <FieldTimeOutlined />,
      label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
    });
  }
  accountingChildren.push(
    {
      key: "entertimetickets",
      icon: <Icon component={GiPlayerTime} />,
      label: (
        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
          {t("menus.header.entertimeticket")}
        </LockWrapper>
      ),
      id: "header-accounting-entertimetickets",
      onClick: () => {
        HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
          setTimeTicketContext({
            actions: {},
            context: {
              created_by: currentUser.displayName
                ? currentUser.email.concat(" | ", currentUser.displayName)
                : currentUser.email
            }
          });
      }
    },
    {
      type: "divider"
    }
  );

  const accountingExportChildren = [
    {
      key: "receivables",
      id: "header-accounting-receivables",
      label: (
        <Link to="/manage/accounting/receivables">
          <LockWrapper featureName="export" bodyshop={bodyshop}>
            {t("menus.header.accounting-receivables")}
          </LockWrapper>
        </Link>
      )
    }
  ];

  if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on") {
    accountingExportChildren.push({
      key: "payables",
      id: "header-accounting-payables",
      label: (
        <Link to="/manage/accounting/payables">
          <LockWrapper featureName="export" bodyshop={bodyshop}>
            {t("menus.header.accounting-payables")}
          </LockWrapper>
        </Link>
      )
    });
  }

  if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))) {
    accountingExportChildren.push({
      key: "payments",
      id: "header-accounting-payments",
      label: (
        <Link to="/manage/accounting/payments">
          <LockWrapper featureName="export" bodyshop={bodyshop}>
            {t("menus.header.accounting-payments")}
          </LockWrapper>
        </Link>
      )
    });
  }

  accountingExportChildren.push(
    {
      type: "divider"
    },
    {
      key: "exportlogs",
      id: "header-accounting-exportlogs",
      label: (
        <Link to="/manage/accounting/exportlogs">
          <LockWrapper featureName="export" bodyshop={bodyshop}>
            {t("menus.header.export-logs")}
          </LockWrapper>
        </Link>
      )
    }
  );

  accountingChildren.push({
    key: "accountingexport",
    id: "header-accounting-export",
    icon: <ExportOutlined />,
    label: (
      <LockWrapper featureName="export" bodyshop={bodyshop}>
        {t("menus.header.export")}
      </LockWrapper>
    ),
    children: accountingExportChildren
  });

  const menuItems = [
    {
      key: "home",
      icon: <HomeFilled />,
      id: "header-home",
      label: <Link to="/manage/">{t("menus.header.home")}</Link>
    },
    {
      key: "schedule",
      id: "header-schedule",
      icon: <Icon component={FaCalendarAlt} />,
      label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
    },
    {
      key: "jobssubmenu",
      id: "header-jobs",
      icon: <Icon component={FaCarCrash} />,
      label: t("menus.header.jobs"),
      children: [
        {
          key: "activejobs",
          id: "header-active-jobs",
          icon: <FileFilled />,
          label: <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
        },
        {
          key: "readyjobs",
          id: "header-ready-jobs",
          icon: <CheckCircleOutlined />,
          label: <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
        },
        {
          key: "parts-queue",
          id: "header-parts-queue",
          icon: <ToolFilled />,
          label: <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
        },
        {
          key: "availablejobs",
          id: "header-jobs-available",
          icon: <ImportOutlined />,
          label: <Link to="/manage/available">{t("menus.header.availablejobs")}</Link>
        },
        {
          key: "newjob",
          id: "header-new-job",
          icon: <FileAddOutlined />,
          label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
        },
        {
          type: "divider",
          id: "header-jobs-divider"
        },
        {
          key: "alljobs",
          id: "header-all-jobs",
          icon: <UnorderedListOutlined />,
          label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
        },
        {
          type: "divider",
          id: "header-jobs-divider2"
        },
        {
          key: "productionlist",
          id: "header-production-list",
          icon: <ScheduleOutlined />,
          label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
        },

        {
          key: "productionboard",
          id: "header-production-board",
          icon: <Icon component={BsKanban} />,
          label: (
            <Link to="/manage/production/board">
              <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
                {t("menus.header.productionboard")}
              </LockWrapper>
            </Link>
          )
        },

        {
          type: "divider",
          id: "header-jobs-divider3"
        },
        {
          key: "scoreboard",
          id: "header-scoreboard",
          icon: <LineChartOutlined />,
          label: (
            <Link to="/manage/scoreboard">
              <LockWrapper featureName="scoreboard" bodyshop={bodyshop}>
                {t("menus.header.scoreboard")}
              </LockWrapper>
            </Link>
          )
        }
      ]
    },
    {
      key: "customers",
      icon: <UserOutlined />,
      id: "header-customers",
      label: t("menus.header.customers"),
      children: [
        {
          key: "owners",
          id: "header-owners",
          icon: <TeamOutlined />,
          label: <Link to="/manage/owners">{t("menus.header.owners")}</Link>
        },
        {
          key: "vehicles",
          id: "header-vehicles",
          icon: <CarFilled />,
          label: <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
        }
      ]
    },
    {
      key: "ccs",
      id: "header-css",
      icon: <CarFilled />,
      label: (
        <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
          {t("menus.header.courtesycars")}
        </LockWrapper>
      ),
      children: [
        {
          key: "courtesycarsall",
          id: "header-courtesycars-all",
          icon: <CarFilled />,
          label: (
            <Link to="/manage/courtesycars">
              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
                {t("menus.header.courtesycars-all")}
              </LockWrapper>
            </Link>
          )
        },
        {
          key: "contracts",
          id: "header-contracts",
          icon: <FileFilled />,
          label: (
            <Link to="/manage/courtesycars/contracts">
              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
                {t("menus.header.courtesycars-contracts")}
              </LockWrapper>
            </Link>
          )
        },
        {
          key: "newcontract",
          id: "header-newcontract",
          icon: <FileAddFilled />,
          label: (
            <Link to="/manage/courtesycars/contracts/new">
              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
                {t("menus.header.courtesycars-newcontract")}
              </LockWrapper>
            </Link>
          )
        }
      ]
    },

    ...(accountingChildren.length > 0
      ? [
          {
            key: "accounting",
            id: "header-accounting",
            icon: <DollarCircleFilled />,
            label: t("menus.header.accounting"),
            children: accountingChildren
          }
        ]
      : []),
    {
      key: "phonebook",
      id: "header-phonebook",
      icon: <PhoneOutlined />,
      label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
    },

    {
      key: "temporarydocs",
      id: "header-temporarydocs",
      icon: <PaperClipOutlined />,
      label: (
        <Link to="/manage/temporarydocs">
          <LockWrapper featureName="media" bodyshop={bodyshop}>
            {t("menus.header.temporarydocs")}
          </LockWrapper>
        </Link>
      )
    },

    {
      key: "tasks",
      id: "tasks",
      icon: <FaTasks />,
      label: t("menus.header.tasks"),
      children: [
        {
          key: "createTask",
          id: "header-create-task",
          icon: <PlusCircleOutlined />,
          label: t("menus.header.create_task"),
          onClick: () => {
            setTaskUpsertContext({
              actions: {},
              context: {}
            });
          }
        },
        {
          key: "mytasks",
          id: "header-my-tasks",
          icon: <FaTasks />,
          label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
        },
        {
          key: "all_tasks",
          id: "header-all-tasks",
          icon: <FaTasks />,
          label: <Link to="/manage/tasks/alltasks">{t("menus.header.all_tasks")}</Link>
        }
      ]
    },
    {
      key: "shopsubmenu",
      id: "header-shopsubmenu",
      icon: <SettingOutlined />,
      label: t("menus.header.shop"),
      children: [
        {
          key: "shop",
          id: "header-shop",
          icon: <Icon component={GiSettingsKnobs} />,
          label: <Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>
        },
        {
          key: "dashboard",
          id: "header-dashboard",
          icon: <DashboardFilled />,
          label: (
            <Link to="/manage/dashboard">
              <LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
            </Link>
          )
        },
        {
          key: "reportcenter",
          id: "header-reportcenter",
          icon: <BarChartOutlined />,
          label: t("menus.header.reportcenter"),
          onClick: () => {
            setReportCenterContext({
              actions: {},
              context: {}
            });
          }
        },
        {
          key: "shop-vendors",
          id: "header-shop-vendors",
          icon: <Icon component={IoBusinessOutline} />,
          label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
        },

        {
          key: "shop-csi",
          id: "header-shop-csi",
          icon: <Icon component={RiSurveyLine} />,
          label: (
            <Link to="/manage/shop/csi">
              <LockWrapper featureName="export" bodyshop={bodyshop}>
                {t("menus.header.shop_csi")}
              </LockWrapper>
            </Link>
          )
        }
      ]
    },
    {
      key: "user",
      label: currentUser.displayName || currentUser.email || t("general.labels.unknown"),
      children: [
        {
          key: "signout",
          id: "header-signout",
          icon: <Icon component={FiLogOut} />,
          danger: true,
          label: t("user.actions.signout"),
          onClick: () => signOutStart()
        },
        {
          key: "help",
          id: "header-help",
          icon: <Icon component={QuestionCircleFilled} />,
          label: t("menus.header.help"),
          onClick: () => {
            window.open(
              InstanceRenderManager({
                imex: "https://help.imex.online/",
                rome: "https://rometech.com//"
              }),

              "_blank"
            );
          }
        },
        ...(InstanceRenderManager({
          imex: true,
          rome: false
        })
          ? [
              {
                key: "rescue",
                id: "header-rescue",
                icon: <Icon component={CarFilled} />,
                label: t("menus.header.rescueme"),
                onClick: () => {
                  window.open("https://imexrescue.com/", "_blank");
                }
              }
            ]
          : []),

        {
          key: "shiftclock",
          id: "header-shiftclock",
          icon: <Icon component={GiPlayerTime} />,
          label: (
            <Link to="/manage/shiftclock">
              <LockWrapper featureName="export" bodyshop={bodyshop}>
                {t("menus.header.shiftclock")}
              </LockWrapper>
            </Link>
          )
        },

        {
          key: "profile",
          id: "header-profile",
          icon: <UserOutlined />,
          label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
        }
        // {
        //   key: 'langselecter',
        //   label: t("menus.currentuser.languageselector"),
        //   children: [
        //     {
        //       key: 'en-US',
        //       label: t("general.languages.english"),
        //       onClick: () => {
        //         window.location.href = "/?lang=en-US";
        //       }
        //     },
        //     {
        //       key: 'fr-CA',
        //       label: t("general.languages.french"),
        //       onClick: () => {
        //         window.location.href = "/?lang=fr-CA";
        //       }
        //     },
        //     {
        //       key: 'es-MX',
        //       label: t("general.languages.spanish"),
        //       onClick: () => {
        //         window.location.href = "/?lang=es-MX";
        //       }
        //     },
        //   ]
        // },
      ]
    },
    {
      key: "recent",
      icon: <ClockCircleFilled />,
      id: "header-recent",
      children: recentItems.map((i, idx) => ({
        key: idx,
        id: `header-recent-${idx}`,
        label: <Link to={i.url}>{i.label}</Link>
      }))
    }
  ];

  return (
    <Layout.Header>
      <Menu
        mode="horizontal"
        theme={"dark"}
        selectedKeys={[selectedHeader]}
        onClick={handleMenuClick}
        subMenuCloseDelay={0.3}
        items={menuItems}
      />
    </Layout.Header>
  );
}

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