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 {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 {FiLogOut} from 'react-icons/fi';
import {checkBeta, handleBeta, setBeta} from '../../utils/betaHandler';
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',
        icon: <Icon component={FaFileInvoiceDollar} />,
        label: <Link to="/manage/bills">{t('menus.header.bills')}</Link>,
      },
      {
        key: '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',
        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',
        icon: <BankFilled />,
        label: <Link to="/manage/payments">{t('menus.header.allpayments')}</Link>,
      },
      {
        key: 'enterpayments',
        icon: <Icon component={FaCreditCard} />,
        label: t('menus.header.enterpayment'),
        onClick: () => {
          setPaymentContext({
            actions: {},
            context: null,
          });
        },
      }
    );
  }

  if (ImEXPay.treatment === 'on') {
    accountingChildren.push({
      key: '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',
        icon: <FieldTimeOutlined />,
        label: <Link to="/manage/timetickets">{t('menus.header.timetickets')}</Link>,
      }
    );

    if (bodyshop?.md_tasks_presets?.use_approvals) {
      accountingChildren.push({
        key: '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'),
        onClick: () => {
          setTimeTicketContext({
            actions: {},
            context: {
              created_by: currentUser.displayName
                ? currentUser.email.concat(' | ', currentUser.displayName)
                : currentUser.email,
            },
          });
        },
      },
      {
        type: 'divider',
      }
    );
  }

  const accountingExportChildren = [
    {
      key: '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',
      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',
      label: <Link to="/manage/accounting/payments">{t('menus.header.accounting-payments')}</Link>,
    });
  }

  accountingExportChildren.push(
    {
      type: 'divider',
    },
    {
      key: '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',
      icon: <ExportOutlined />,
      label: t('menus.header.export'),
      children: accountingExportChildren,
    });
  }

  const menuItems = [
    {
      key: 'home',
      icon: <HomeFilled />,
      label: <Link to="/manage/">{t('menus.header.home')}</Link>,
    },
    {
      key: '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',
          icon: <FileFilled />,
          label: <Link to="/manage/jobs">{t('menus.header.activejobs')}</Link>,
        },
        {
          key: 'readyjobs',
          icon: <CheckCircleOutlined />,
          label: <Link to="/manage/jobs/ready">{t('menus.header.readyjobs')}</Link>,
        },
        {
          key: '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',
          icon: <FileAddOutlined />,
          label: <Link to="/manage/jobs/new">{t('menus.header.newjob')}</Link>,
        },
        {
          key: 'alljobs',
          icon: <UnorderedListOutlined />,
          label: <Link to="/manage/jobs/all">{t('menus.header.alljobs')}</Link>,
        },
        {
          type: 'divider',
        },
        {
          key: 'productionlist',
          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',
                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',
                icon: <LineChartOutlined />,
                label: <Link to="/manage/scoreboard">{t('menus.header.scoreboard')}</Link>,
              },
            ]
          : []),
      ],
    },
    {
      key: 'customers',
      icon: <UserOutlined />,
      label: t('menus.header.customers'),
      children: [
        {
          key: 'owners',
          icon: <TeamOutlined />,
          label: <Link to="/manage/owners">{t('menus.header.owners')}</Link>,
        },
        {
          key: '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',
            icon: <CarFilled />,
            label: t('menus.header.courtesycars'),
            children: [
              {
                key: 'courtesycarsall',
                icon: <CarFilled />,
                label: <Link to="/manage/courtesycars">{t('menus.header.courtesycars-all')}</Link>,
              },
              {
                key: 'contracts',
                icon: <FileFilled />,
                label: (
                  <Link to="/manage/courtesycars/contracts">
                    {t('menus.header.courtesycars-contracts')}
                  </Link>
                ),
              },
              {
                key: 'newcontract',
                icon: <FileAddFilled />,
                label: (
                  <Link to="/manage/courtesycars/contracts/new">
                    {t('menus.header.courtesycars-newcontract')}
                  </Link>
                ),
              },
            ],
          },
        ]
      : []),

    ...(accountingChildren.length > 0
      ? [
          {
            key: 'accounting',
            icon: <DollarCircleFilled />,
            label: t('menus.header.accounting'),
            children: accountingChildren,
          },
        ]
      : []),
    {
      key: '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',
            icon: <PaperClipOutlined />,
            label: <Link to="/manage/temporarydocs">{t('menus.header.temporarydocs')}</Link>,
          },
        ]
      : []),
    {
      key: 'tasks',
      id: 'tasks',
      icon: <FaTasks />,
      label: t('menus.header.my_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">{t('menus.header.tasks')}</Link>,
        }
      ]
    },
    {
      key: 'shopsubmenu',
      icon: <SettingOutlined />,
      label: t('menus.header.shop'),
      children: [
        {
          key: 'shop',
          icon: <Icon component={GiSettingsKnobs} />,
          label: <Link to="/manage/shop?tab=info">{t('menus.header.shop_config')}</Link>,
        },
        {
          key: 'dashboard',
          icon: <DashboardFilled />,
          label: <Link to="/manage/dashboard">{t('menus.header.dashboard')}</Link>,
        },
        {
          key: 'reportcenter',
          icon: <BarChartOutlined />,
          label: t('menus.header.reportcenter'),
          onClick: () => {
            setReportCenterContext({
              actions: {},
              context: {},
            });
          },
        },
        {
          key: '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',
                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',
          icon: <Icon component={FiLogOut} />,
          danger: true,
          label: t('user.actions.signout'),
          onClick: () => signOutStart(),
        },
        {
          key: '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'
            );
          },
        },
        // {
        //     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',
                icon: <Icon component={GiPlayerTime} />,
                label: <Link to="/manage/shiftclock">{t('menus.header.shiftclock')}</Link>,
              },
            ]
          : []),
        {
          key: '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 />,
      children: recentItems.map((i, idx) => ({
        key: idx,
        label: <Link to={i.url}>{i.label}</Link>,
      })),
    },
  ];

  menuItems.push({
    key: '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);