import Icon, { FieldTimeOutlined } from "@ant-design/icons";
import { Tabs } from "antd";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { FaShieldAlt } from "react-icons/fa";
import { connect } from "react-redux";
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 ScoreboardTimeTickets from "../../components/scoreboard-timetickets/scoreboard-timetickets.component";
import {
  setBreadcrumbs,
  setSelectedHeader,
} from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import queryString from "query-string";
import { useHistory, useLocation } from "react-router-dom";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});

const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
});

export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
  const { t } = useTranslation();
  const searchParams = queryString.parse(useLocation().search);
  const { tab } = searchParams;
  const history = useHistory();
  useEffect(() => {
    document.title = t("titles.scoreboard");
    setSelectedHeader("scoreboard");
    setBreadcrumbs([
      {
        link: "/manage/scoreboard",
        label: t("titles.bc.scoreboard"),
      },
    ]);
  }, [t, setBreadcrumbs, setSelectedHeader]);

  return (
    <FeatureWrapper featureName="scoreboard">
      <RbacWrapper action="scoreboard:view">
        <Tabs
          activeKey={tab || "sb"}
          destroyInactiveTabPane
          onChange={(key) => {
            searchParams.tab = key;
            history.push({
              search: queryString.stringify(searchParams),
            });
          }}
        >
          <Tabs.TabPane
            tab={
              <span>
                <Icon component={FaShieldAlt} />
                {t("scoreboard.labels.jobs")}
              </span>
            }
            destroyInactiveTabPane
            key="sb"
          >
            <ScoreboardDisplay />
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={
              <span>
                <FieldTimeOutlined />
                {t("scoreboard.labels.timetickets")}
              </span>
            }
            destroyInactiveTabPane
            key="tickets"
          >
            <ScoreboardTimeTickets />
          </Tabs.TabPane>
        </Tabs>
      </RbacWrapper>
    </FeatureWrapper>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ScoreboardContainer);
