import {useQuery} from "@apollo/client";
import React, {useEffect} from "react";
import {useTranslation} from "react-i18next";
import {connect} from "react-redux";
import {useParams} from "react-router-dom";
import {createStructuredSelector} from "reselect";
import AlertComponent from "../../components/alert/alert.component";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
import {QUERY_DELIVER_CHECKLIST} from "../../graphql/bodyshop.queries";
import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
import {selectBodyshop} from "../../redux/user/user.selectors";
import JobchecklistComponent from "../../components/job-checklist/job-checklist.component";
import InstanceRenderManager from '../../utils/instanceRenderMgr';

const mapStateToProps = createStructuredSelector({
    //currentUser: selectCurrentUser
    bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
    setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
    setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
});

export function JobsDeliverContainer({
                                         bodyshop,
                                         setBreadcrumbs,
                                         setSelectedHeader,
                                     }) {
    const {t} = useTranslation();
    const {jobId} = useParams();
    const {loading, error, data} = useQuery(QUERY_DELIVER_CHECKLIST, {
        variables: {shopId: bodyshop.id, jobId: jobId},
        fetchPolicy: "network-only",
        nextFetchPolicy: "network-only",
    });

    useEffect(() => {
        document.title = t("titles.jobs-deliver",{app: InstanceRenderManager({imex:'$t(titles.imexonline)', rome: '$t(titles.romeonline)', promanager: '$t(titles.promanager)'})}        );
        setSelectedHeader("activejobs");
        setBreadcrumbs([
            {link: "/manage/jobs", label: t("titles.bc.jobs")},
            {
                link: `/manage/jobs/${jobId}`,
                label: t("titles.bc.jobs-detail", {
                    number: (data && data.jobs_by_pk && data.jobs_by_pk.ro_number) || "",
                }),
            },
            {
                link: `/manage/jobs/${jobId}/deliver`,
                label: t("titles.bc.jobs-deliver"),
            },
        ]);
    }, [t, setBreadcrumbs, jobId, data, setSelectedHeader]);

    if (loading) return <LoadingSpinner/>;
    if (error) return <AlertComponent message={error.message} type="error"/>;
    if (data && !!!data.bodyshops_by_pk.deliverchecklist)
        return (
            <AlertComponent message={t("deliver.errors.nochecklist")} type="error"/>
        );
    return (
        <RbacWrapper action="jobs:deliver">
            <div>
                <JobchecklistComponent
                    type="deliver"
                    checklistConfig={
                        (data && data.bodyshops_by_pk.deliverchecklist) || {}
                    }
                    job={data ? data.jobs_by_pk : {}}
                />
            </div>
        </RbacWrapper>
    );
}

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