import {useMutation, 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 SpinComponent from "../../components/loading-spinner/loading-spinner.component";
import NotFound from "../../components/not-found/not-found.component";
import {OwnerNameDisplayFunction} from "../../components/owner-name-display/owner-name-display.component";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
import {GET_JOB_BY_PK, UPDATE_JOB} from "../../graphql/jobs.queries";
import {
    addRecentItem,
    setBreadcrumbs,
    setJobReadOnly,
    setSelectedHeader,
} from "../../redux/application/application.actions";
import {selectBodyshop} from "../../redux/user/user.selectors";
import {CreateRecentItem} from "../../utils/create-recent-item";
import IsJobReadOnly from "../../utils/jobReadOnly";
import JobsDetailPage from "./jobs-detail.page.component";

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

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

function JobsDetailPageContainer({
                                     setBreadcrumbs,
                                     addRecentItem,
                                     setSelectedHeader,
                                     setJobReadOnly,
                                 }) {
    const {jobId} = useParams();
    const {t} = useTranslation();

    const {loading, error, data, refetch} = useQuery(GET_JOB_BY_PK, {
        variables: {id: jobId},
        fetchPolicy: "network-only",
        nextFetchPolicy: "network-only",
    });
    const [mutationUpdateJob] = useMutation(UPDATE_JOB);

    useEffect(() => {
        setSelectedHeader("activejobs");
        document.title = loading
            ? t("titles.app")
            : error
                ? t("titles.app")
                : t("titles.jobsdetail", {
                    ro_number:
                        (data.jobs_by_pk && data.jobs_by_pk.ro_number) ||
                        t("general.labels.na"),
                });
        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) ||
                        t("general.labels.na"),
                }),
            },
        ]);

        if (data && data.jobs_by_pk) {
            setJobReadOnly(IsJobReadOnly(data.jobs_by_pk));

            addRecentItem(
                CreateRecentItem(
                    jobId,
                    "job",

                    `${
                        data.jobs_by_pk.ro_number || t("general.labels.na")
                    } | ${OwnerNameDisplayFunction(data.jobs_by_pk)}`,
                    `/manage/jobs/${jobId}`
                )
            );
        }
    }, [
        loading,
        data,
        t,
        error,
        setBreadcrumbs,
        jobId,
        addRecentItem,
        setSelectedHeader,
        setJobReadOnly,
    ]);

    if (loading) return <SpinComponent/>;
    if (error) return <AlertComponent message={error.message} type="error"/>;
    if (!!!data.jobs_by_pk) return <NotFound/>;

    return data.jobs_by_pk ? (
        <RbacWrapper action="jobs:detail">
            <JobsDetailPage
                job={data.jobs_by_pk}
                mutationUpdateJob={mutationUpdateJob}
                refetch={refetch}
            />
        </RbacWrapper>
    ) : (
        <AlertComponent message={t("jobs.errors.noaccess")} type="error"/>
    );
}

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