import { Button, PageHeader } from "antd";
import React, { 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";

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");
    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>
          }
        />
        <AlertComponent
          type="warning"
          message={t("general.messages.partnernotrunning")}
        />
        <JobsAvailableTableContainer />
      </div>
    </RbacWrapper>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(JobsAvailablePageContainer);