import Icon, { FieldTimeOutlined } from "@ant-design/icons";
import { Card, Tabs } from "antd";
import queryString from "query-string";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { FaShieldAlt } from "react-icons/fa";
import { connect } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
import ScoreboardTimeTicketsStats from "../../components/scoreboard-timetickets-stats/scoreboard-timetickets.component";
import ScoreboardTimeTickets from "../../components/scoreboard-timetickets/scoreboard-timetickets.component";
import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

/**
 * Mapping state to props
 */
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

/**
 * Mapping dispatch to props
 */
const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
  setSelectedHeader: (key) => dispatch(setSelectedHeader(key))
});

/**
 * ScoreboardContainer component
 * @param {Object} props - The props that were defined by the caller of this component.
 * @param {Function} props.setBreadcrumbs - Function to set breadcrumbs.
 * @param {Function} props.setSelectedHeader - Function to set selected header.
 */
export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
  const { t } = useTranslation();
  const searchParams = queryString.parse(useLocation().search);
  const { tab } = searchParams;
  const history = useNavigate();

  /**
   * useEffect hook to set document title, selected header and breadcrumbs
   */
  useEffect(() => {
    document.title = t("titles.scoreboard", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("scoreboard");
    setBreadcrumbs([
      {
        link: "/manage/scoreboard",
        label: t("titles.bc.scoreboard")
      }
    ]);
  }, [t, setBreadcrumbs, setSelectedHeader]);

  /**
   * Render the component
   */
  return (
    <FeatureWrapper
      featureName="scoreboard"
      noauth={
        <Card>
          <UpsellComponent upsell={upsellEnum().scoreboard.general} />
        </Card>
      }
    >
      <RbacWrapper action="scoreboard:view">
        <Tabs
          activeKey={tab || "sb"}
          destroyOnHidden
          onChange={(key) => {
            searchParams.tab = key;
            history({
              search: queryString.stringify(searchParams)
            });
          }}
          items={[
            {
              key: "sb",
              icon: <Icon component={FaShieldAlt} />,
              label: t("scoreboard.labels.jobs"),
              forceRender: true,
              children: <ScoreboardDisplay />
            },
            {
              key: "tickets",
              icon: <FieldTimeOutlined />,
              label: t("scoreboard.labels.timeticketsemployee"),
              forceRender: true,
              children: <ScoreboardTimeTickets />
            },
            {
              key: "ticketsstats",
              icon: <FieldTimeOutlined />,
              label: t("scoreboard.labels.allemployeetimetickets"),
              forceRender: true,
              children: <ScoreboardTimeTicketsStats />
            }
          ]}
        />
      </RbacWrapper>
    </FeatureWrapper>
  );
}

/**
 * Connecting the component to Redux store
 */
export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardContainer);
