import { Button } from "antd";
import { PageHeader } from "@ant-design/pro-layout";

import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import AlertComponent from "../../components/alert/alert.component";
import JobsAvailableTableContainer from "../../components/jobs-available-table/jobs-available-table.container";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
import { selectPartnerVersion } from "../../redux/application/application.selectors";
import InstanceRenderManager from "../../utils/instanceRenderMgr";

const mapStateToProps = createStructuredSelector({
  partnerVersion: selectPartnerVersion
});

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

export function JobsAvailablePageContainer({ partnerVersion, setBreadcrumbs, setSelectedHeader }) {
  const { t } = useTranslation();

  const getOS = () => {
    const userAgent = navigator.userAgent;
    if (userAgent.indexOf("Win") !== -1) return "windows";
    if (userAgent.indexOf("Mac") !== -1) return "mac";
    if (userAgent.indexOf("Linux") !== -1) return "linux";
    return "unknown";
  };

  const os = getOS();
  const downloadUrl = InstanceRenderManager({
    imex:
      os === "windows"
        ? "https://imex-partner.s3.ca-central-1.amazonaws.com/imex-partner-x64.exe"
        : "https://imex-partner.s3.ca-central-1.amazonaws.com/imex-partner-arm64.dmg",
    rome:
      os === "windows"
        ? "https://rome-partner.s3.us-east-2.amazonaws.com/rome-partner-x64.exe"
        : "https://rome-partner.s3.us-east-2.amazonaws.com/rome-partner-arm64.dmg"
  });

  useEffect(() => {
    document.title = t("titles.jobsavailable", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("availablejobs");
    setBreadcrumbs([{ link: "/manage/available", label: t("titles.bc.availablejobs") }]);
  }, [t, setBreadcrumbs, setSelectedHeader]);

  return (
    <RbacWrapper action="jobs:available-list">
      <div>
        <PageHeader />
        {!partnerVersion && (
          <AlertComponent
            type="warning"
            action={
              <a href={downloadUrl}>
                <Button size="small">{t("general.actions.download")}</Button>
              </a>
            }
            title={t("general.messages.partnernotrunning", {
              app: InstanceRenderManager({
                imex: "$t(titles.imexonline)",
                rome: "$t(titles.romeonline)"
              })
            })}
          />
        )}
        <JobsAvailableTableContainer />
      </div>
    </RbacWrapper>
  );
}

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