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 { Link } from "react-router-dom";
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();

  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
          title={t("titles.bc.availablejobs")}
          extra={
            <Link to="/manage/jobs/new">
              <Button>{t("jobs.actions.manualnew")}</Button>
            </Link>
          }
        />
        {!partnerVersion && (
          <AlertComponent
            type="warning"
            action={
              <a
                href={InstanceRenderManager({
                  imex: "https://partner.imex.online/Setup.exe",
                  rome: "https://partner.romeonline.io/Setup.exe"
                })}
              >
                <Button size="small">{t("general.actions.download")}</Button>
              </a>
            }
            message={t("general.messages.partnernotrunning", {
              app: InstanceRenderManager({
                imex: "$t(titles.imexonline)",
                rome: "$t(titles.romeonline)"
              })
            })}
          />
        )}
        <JobsAvailableTableContainer />
      </div>
    </RbacWrapper>
  );
}

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