import {useApolloClient, useQuery, useSubscription} from "@apollo/client";
import _ from "lodash";
import React, {useEffect, useState} from "react";
import {connect} from "react-redux";
import {createStructuredSelector} from "reselect";
import {
    QUERY_EXACT_JOB_IN_PRODUCTION,
    QUERY_EXACT_JOBS_IN_PRODUCTION,
    QUERY_JOBS_IN_PRODUCTION,
    SUBSCRIPTION_JOBS_IN_PRODUCTION,
} from "../../graphql/jobs.queries";
import {QUERY_KANBAN_SETTINGS} from "../../graphql/user.queries";
import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
import ProductionBoardKanbanComponent from "./production-board-kanban.component";

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

export function ProductionBoardKanbanContainer({bodyshop, currentUser}) {
    const {refetch, loading, data} = useQuery(QUERY_JOBS_IN_PRODUCTION, {
        pollInterval: 3600000,
        fetchPolicy: "network-only",
        nextFetchPolicy: "network-only",
    });
    const client = useApolloClient();
    const [joblist, setJoblist] = useState([]);
    const {data: updatedJobs} = useSubscription(
        SUBSCRIPTION_JOBS_IN_PRODUCTION
    );

    useEffect(() => {
        if (!(data && data.jobs)) return;
        setJoblist(
            data.jobs.map((j) => {
                return {id: j.id, updated_at: j.updated_at};
            })
        );
    }, [data]);

    useEffect(() => {
        if (!updatedJobs || joblist.length === 0) return;

        const jobDiff = _.differenceWith(
            joblist,
            updatedJobs.jobs,
            (a, b) => a.id === b.id && a.updated_at === b.updated_at
        );

        jobDiff.forEach((job) => {
            getUpdatedJobData(job.id);
        });
        if (jobDiff.length > 1) {
            getUpdatedJobsData(jobDiff.map((j) => j.id));
        } else if (jobDiff.length === 1) {
            jobDiff.forEach((job) => {
                getUpdatedJobData(job.id);
            });
        }

        setJoblist(updatedJobs.jobs);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [updatedJobs]);

    const getUpdatedJobData = async (jobId) => {
        client.query({
            query: QUERY_EXACT_JOB_IN_PRODUCTION,
            variables: {id: jobId},
        });
    };
    const getUpdatedJobsData = async (jobIds) => {
        client.query({
            query: QUERY_EXACT_JOBS_IN_PRODUCTION,
            variables: {ids: jobIds},
        });
    };

    const {loading: associationSettingsLoading, data: associationSettings} =
        useQuery(QUERY_KANBAN_SETTINGS, {
            variables: {email: currentUser.email},
        });

    return (
        <ProductionBoardKanbanComponent
            loading={loading || associationSettingsLoading}
            data={data ? data.jobs : []}
            refetch={refetch}
            associationSettings={
                associationSettings && associationSettings.associations[0]
                    ? associationSettings.associations[0]
                    : null
            }
        />
    );
}

export default connect(mapStateToProps, null)(ProductionBoardKanbanContainer);