import Icon, {
  BankFilled,
  BarChartOutlined,
  CarFilled,
  CheckCircleOutlined,
  ClockCircleFilled,
  DashboardFilled,
  DollarCircleFilled,
  ExportOutlined,
  FieldTimeOutlined,
  FileAddFilled,
  FileAddOutlined,
  FileFilled,
  HomeFilled,
  ImportOutlined,
  InfoCircleOutlined,
  LineChartOutlined,
  PaperClipOutlined,
  PhoneOutlined,
  PlusCircleOutlined,
  QuestionCircleFilled,
  ScheduleOutlined,
  SettingOutlined,
  TeamOutlined,
  ToolFilled,
  UnorderedListOutlined,
  UserOutlined
} from "@ant-design/icons";
import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { Layout, Menu, Switch, Tooltip } from "antd";
import React, { useEffect, useState } from "react";
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 { checkBeta, handleBeta, setBeta } from "../../utils/handleBeta";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import { HasFeatureAccess } from "../feature-wrapper/feature-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 [betaSwitch, setBetaSwitch] = useState(false);
  const { t } = useTranslation();

  useEffect(() => {
    const isBeta = checkBeta();
    setBetaSwitch(isBeta);
  }, []);

  const betaSwitchChange = (checked) => {
    setBeta(checked);
    setBetaSwitch(checked);
    handleBeta();
  };

  const accountingChildren = [];

  if (
    InstanceRenderManager({
      imex: true,
      rome: true,
      promanager: HasFeatureAccess({ featureName: "bills", bodyshop })
    })
  ) {
    accountingChildren.push(
      {
        key: "bills",
        id: "header-accounting-bills",
        icon: <Icon component={FaFileInvoiceDollar} />,
        label: <Link to="/manage/bills">{t("menus.header.bills")}</Link>
      },
      {
        key: "enterbills",
        id: "header-accounting-enterbills",
        icon: <Icon component={GiPayMoney} />,
        label: t("menus.header.enterbills"),
        onClick: () => {
          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>
      }
    );
  }
  if (
    InstanceRenderManager({
      imex: true,
      rome: true,
      promanager: HasFeatureAccess({ featureName: "payments", bodyshop })
    })
  ) {
    accountingChildren.push(
      {
        type: "divider"
      },
      {
        key: "allpayments",
        id: "header-accounting-allpayments",
        icon: <BankFilled />,
        label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
      },
      {
        key: "enterpayments",
        id: "header-accounting-enterpayments",
        icon: <Icon component={FaCreditCard} />,
        label: t("menus.header.enterpayment"),
        onClick: () => {
          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: {}
        });
      }
    });
  }

  if (
    InstanceRenderManager({
      imex: true,
      rome: true,
      promanager: HasFeatureAccess({ featureName: "timetickets", bodyshop })
    })
  ) {
    accountingChildren.push(
      {
        type: "divider"
      },
      {
        key: "timetickets",
        id: "header-accounting-timetickets",
        icon: <FieldTimeOutlined />,
        label: <Link to="/manage/timetickets">{t("menus.header.timetickets")}</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: t("menus.header.entertimeticket"),
        id: "header-accounting-entertimetickets",
        onClick: () => {
          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">{t("menus.header.accounting-receivables")}</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">{t("menus.header.accounting-payables")}</Link>
    });
  }

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

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

  if (
    InstanceRenderManager({
      imex: true,
      rome: true,
      promanager: HasFeatureAccess({ featureName: "export", bodyshop })
    })
  ) {
    accountingChildren.push({
      key: "accountingexport",
      id: "header-accounting-export",
      icon: <ExportOutlined />,
      label: t("menus.header.export"),
      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"
        },
        {
          key: "alljobs",
          id: "header-all-jobs",
          icon: <UnorderedListOutlined />,
          label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
        },
        {
          type: "divider"
        },
        {
          key: "productionlist",
          id: "header-production-list",
          icon: <ScheduleOutlined />,
          label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
        },
        ...(InstanceRenderManager({
          imex: true,
          rome: true,
          promanager: HasFeatureAccess({ featureName: "visualboard", bodyshop })
        })
          ? [
              {
                key: "productionboard",
                id: "header-production-board",
                icon: <Icon component={BsKanban} />,
                label: <Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>
              }
            ]
          : []),

        ...(InstanceRenderManager({
          imex: true,
          rome: true,
          promanager: HasFeatureAccess({ featureName: "scoreboard", bodyshop })
        })
          ? [
              {
                type: "divider"
              },
              {
                key: "scoreboard",
                id: "header-scoreboard",
                icon: <LineChartOutlined />,
                label: <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</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>
        }
      ]
    },
    ...(InstanceRenderManager({
      imex: true,
      rome: true,
      promanager: false // HasFeatureAccess({ featureName: 'courtesycars', bodyshop }),
    })
      ? [
          {
            key: "ccs",
            id: "header-css",
            icon: <CarFilled />,
            label: t("menus.header.courtesycars"),
            children: [
              {
                key: "courtesycarsall",
                id: "header-courtesycars-all",
                icon: <CarFilled />,
                label: <Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>
              },
              {
                key: "contracts",
                id: "header-contracts",
                icon: <FileFilled />,
                label: <Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>
              },
              {
                key: "newcontract",
                id: "header-newcontract",
                icon: <FileAddFilled />,
                label: <Link to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</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>
    },
    ...(InstanceRenderManager({
      imex: true,
      rome: true,
      promanager: HasFeatureAccess({ featureName: "media", bodyshop })
    })
      ? [
          {
            key: "temporarydocs",
            id: "header-temporarydocs",
            icon: <PaperClipOutlined />,
            label: <Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>
          }
        ]
      : []),
    {
      key: "tasks",
      id: "tasks",
      icon: <FaTasks />,
      label: t("menus.header.tasks"),
      children: [
        {
          key: "createTask",
          icon: <PlusCircleOutlined />,
          label: t("menus.header.create_task"),
          onClick: () => {
            setTaskUpsertContext({
              actions: {},
              context: {}
            });
          }
        },
        {
          key: "mytasks",
          icon: <FaTasks />,
          label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
        },
        {
          key: "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">{t("menus.header.dashboard")}</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>
        },
        ...(InstanceRenderManager({
          imex: true,
          rome: true,
          promanager: HasFeatureAccess({ featureName: "csi", bodyshop })
        })
          ? [
              {
                key: "shop-csi",
                id: "header-shop-csi",
                icon: <Icon component={RiSurveyLine} />,
                label: <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</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//",
                promanager: "https://web-est.com"
              }),

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

        ...(InstanceRenderManager({
          imex: true,
          rome: true,
          promanager: HasFeatureAccess({ featureName: "timetickets", bodyshop })
        })
          ? [
              {
                key: "shiftclock",
                id: "header-shiftclock",
                icon: <Icon component={GiPlayerTime} />,
                label: <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</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,
        label: <Link to={i.url}>{i.label}</Link>
      }))
    }
  ];

  InstanceRenderManager({
    executeFunction: true,
    args: [],
    imex: () => {
      menuItems.push({
        key: "beta-switch",
        id: "header-beta-switch",
        style: { marginLeft: "auto" },
        label: (
          <Tooltip
            title={`A more modern ${InstanceRenderManager({
              imex: t("titles.imexonline"),
              rome: t("titles.romeonline"),
              promanager: t("titles.promanager")
            })} is ready for you to try! You can switch back at any time.`}
          >
            <InfoCircleOutlined />
            <span style={{ marginRight: 8 }}>Try the new app</span>
            <Switch checked={betaSwitch} onChange={betaSwitchChange} />
          </Tooltip>
        )
      });
    }
  });

  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);