import { JSONPath as jsonpath } from "jsonpath-plus";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useDropzone } from "react-dropzone";
import { connect } from "react-redux";
import { formValueSelector, reduxForm } from "redux-form";

import { signIn, useSession } from "next-auth/react";
import { generateRepPDF, sendEmail, uploadRepFiles } from "../../../actions";
import { formatDates, updateLinks } from "../../../components/utils";
import {
    setRepresentationCapacity,
    setRepresentationMessageSent,
    setRepresentationReset,
    setRepresentationSubmit,
    setRepresentationSubmitConfirmation,
} from "../../../store/currentView/action";
import RepAgent from "./representationAgent";
import RepAppellant from "./representationAppellant";
import RepCapacitySelection from "./representationCapacitySelection";
import RepCompleteSubmit from "./representationCompleteSubmit";
import RepInterestedPartyPerson from "./representationInterestedPartyPerson";
import RepLPA from "./representationLPA";
import RepLPACapacitySelection from "./representationLPACapacitySelection";
import RepLandOwner from "./representationLandowner";
import RepresentationProgress_enforcement from "./representationProgress/representationProgress_enforcement";
import RepresentationProgress_s78 from "./representationProgress/representationProgress_s78";

let MakeRepresentation = (props) => {
    let { t } = useTranslation();
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

    const [clearRepForm, setClearRepForm] = useState(false);
    const [savingStatus, setSavingStatus] = useState(false);
    const [finaliseAppealProcess, setFinaliseAppealProcess] = useState(false);

    //const [questionnaireCount, setQuestionnaireCount] = useState(0);

    const { data: session } = useSession();

    const router = useRouter();
    const { locale } = router;
    const {
        caseReference,
        myCases,
        myRepresentations,
        watchedCases,
        awaitingSubmission,
        searchResultsObj,
        representationSubmit,
        currentType,
        currentView,
        setRepresentationCapacity,
        setRepresentationSubmit,
        setSubmitBack,
        handleSubmit,
        setRepresentationSubmitConfirmation,
        setRepresentationMessageSent,
        setShowQuestionnaireSection,
        showQuestionnaireSection,
        initialValues,
        setCurrentReference,
    } = props;
    const formObj = props.props.form;
    let setCaseQueryObj = props[currentType] || {};
    var casesObj = {};

    const updateQuestionnaireCount = () => {
        {
            switch (currentView.caseReference.appealType) {
                case 846040000:
                case 846040001:
                case 846040025:
                case 846040004:
                case 846040018:
                case 846040003:
                case 846040009:
                case 846040008:
                    return 7;
                    break;
                case 846040005:
                case 846040006:
                case 846040007:
                    return 9;
                    break;
                default:
                    return 7;
                    break;
            }
        }
    };

    let questionnaireCount = updateQuestionnaireCount();

    const isLPA =
        props.props.accountDetails.accountDetails[
            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
        ] == "LPA"
            ? true
            : false;

    const setRepFileName = (values) => {
        //console.log("---------------\n", values);
        if (
            values.hasOwnProperty("representationCapacity") &&
            values.hasOwnProperty("representationType")
        ) {
            let repType = "";
            let repCap = "";

            const repDate = new Date();

            let day = ("0" + repDate.getDate()).slice(-2);
            let month = ("0" + repDate.getMonth() + 1).slice(-2);
            let year = repDate.getFullYear();

            switch (values.representationCapacity) {
                case t("myrepresentations:capacity-options-arr-appellant"):
                    repCap = "APP";
                    break;
                case t("myrepresentations:capacity-options-arr-agent"):
                    repCap = "APP"; //set as App even tho agent as is from an appeallant by proxy
                    break;
                case t("myrepresentations:capacity-options-arr-interested"):
                    repCap = "IP";
                    break;
                case "Land Owner":
                    repCap = "LO";
                    break;
                case "lpa":
                case "LPA":
                    repCap = "LPA";
                    break;

                default:
                // code block
            }
            switch (values.representationType) {
                case "Statement":
                    repType = "Statement";
                    break;
                case "Statement of common ground":
                    repType = "SCG";
                    break;
                case "Written statement":
                    repType = "WS";
                    break;
                case "Written statement of evidence":
                    repType = "WSE";
                    break;
                case "Questionnaire":
                    repType = "Questionnaire";
                    break;
                case "Final comments":
                    repType = "Comments";
                    break;
                case "Local Impact Report":
                    repType = "Impact";
                    break;

                case "Other":
                    repType = "OTHER";
                    break;

                default:
                // code block
            }
            Object.assign(values, {
                "repfile_name": values.hasOwnProperty("repfile_name")
                    ? values.repfile_name
                    : year +
                      "-" +
                      month +
                      "-" +
                      day +
                      "-" +
                      ("0" + repDate.getHours()).slice(-2) +
                      ":" +
                      ("0" + repDate.getMinutes()).slice(-2) +
                      ":" +
                      ("0" + repDate.getSeconds()).slice(-2) +
                      "_-_" +
                      repCap +
                      "_-_" +
                      repType +
                      "_-_" +
                      (isLPA
                          ? values.onBehalfOfLPA.replace(
                                /[\s~`!@#$%^&*(){}\[\];:"'<,.>?\/\\|_+=-]/g,
                                ""
                            )
                          : values.lastname.replace(
                                /[\s~`!@#$%^&*(){}\[\];:"'<,.>?\/\\|_+=-]/g,
                                ""
                            ) +
                            "_" +
                            values.firstname.replace(
                                /[\s~`!@#$%^&*(){}\[\];:"'<,.>?\/\\|_+=-]/g,
                                ""
                            )),
            });
        }

        return values;
    };

    isLPA && setRepresentationCapacity("LPA");

    currentType == "searchResultsObj"
        ? (casesObj = jsonpath(
              '$..[?(@.title=="' + caseReference + '")]',
              setCaseQueryObj
          ))
        : currentType == "watchedCases"
        ? (casesObj = jsonpath(
              '$..[?(@.ticketnumber=="' + caseReference + '")]',
              watchedCases
          ))
        : (casesObj = jsonpath(
              '$..[?(@.reference=="' + caseReference + '")]',
              setCaseQueryObj
          ));

    casesObj = Object.assign({}, ...casesObj);

    var detailsObj = {};

    const capacityOptionsArr = [
        t("myrepresentations:capacity-options-arr-appellant"),
        t("myrepresentations:capacity-options-arr-agent"),
    ];

    props.props.currentView.caseReference.appealType != 846040017
        ? capacityOptionsArr.push(
              t("myrepresentations:capacity-options-arr-interested")
          )
        : props.props.currentView.caseReference.specialistProcess !=
              846040000 &&
          capacityOptionsArr.push(
              t("myrepresentations:capacity-options-arr-interested")
          );

    let setCaseDetailsObj = router.query.hasOwnProperty("state")
        ? router.query.state == "edit"
            ? props.props.myRepresentations.myRepresentations
            : props.props.searchResultsObj.searchDetailsObj
        : props.currentType == "watchedCases"
        ? props.props.watchedCases.watchedCasesDetails
        : props.props.searchResultsObj.searchDetailsObj;

    let setCaseResultsObj = router.query.hasOwnProperty("state")
        ? router.query.state == "edit"
            ? props.props.myRepresentations.myRepresentations
            : props.props.searchResultsObj.searchResultsObj
        : props.currentType == "watchedCases"
        ? props.props.watchedCases.watchedCasesDetails
        : props.props.searchResultsObj.searchResultsObj;

    var detailsObj = {};

    var resultsObj = {};

    resultsObj = jsonpath(
        '$..[?(@.ticketnumber=="' +
            currentView.caseReference.currentReference +
            '")]',
        setCaseResultsObj
    );

    resultsObj = resultsObj[0];

    detailsObj = router.query.hasOwnProperty("state")
        ? router.query.state == "edit"
            ? jsonpath(
                  '$..[?(@.repfile_name =="' + router.query.created + '")]',
                  setCaseDetailsObj
              )
            : jsonpath(
                  '$..[?(@.pinswg_name =="' +
                      currentView.caseReference.currentReference +
                      '")]',
                  setCaseDetailsObj
              )
        : jsonpath(
              '$..[?(@.pinswg_name =="' +
                  currentView.caseReference.currentReference +
                  '")]',
              setCaseDetailsObj
          );

    detailsObj = detailsObj[0];

    const buildRepsArr = (detailsObj) => {
        let buildArr = [];

        // console.log(currentView.caseReference.appealType, "");

        let todaysDate = new Date();

        const isDNS = currentView.caseReference.appealType == 846040011;

        let startDate;
        let questionnaireDate;
        let finalCommentsDate;
        let statementDueDate;

        isDNS
            ? ((startDate = new Date(
                  detailsObj.pinswg_applicationacceptedasvalid
              )),
              (questionnaireDate = new Date(
                  new Date(
                      detailsObj.pinswg_endofrepresentationperiod
                  ).setHours(23, 59, 59, 999)
              )),
              (finalCommentsDate = new Date(
                  new Date(detailsObj.pinswg_finalcommentsduedate).setHours(
                      23,
                      59,
                      59,
                      999
                  )
              )),
              (statementDueDate = new Date(
                  new Date(
                      detailsObj.pinswg_endofrepresentationperiod
                  ).setHours(23, 59, 59, 999)
              )))
            : ((startDate = new Date(
                  detailsObj.pinswg_startdate || detailsObj.pinswg_startdates
              )),
              (questionnaireDate = new Date(
                  new Date(detailsObj.pinswg_questionnaireduedate).setHours(
                      23,
                      59,
                      59,
                      999
                  )
              )),
              (finalCommentsDate = new Date(
                  new Date(detailsObj.pinswg_finalcommentsduedate).setHours(
                      23,
                      59,
                      59,
                      999
                  )
              )),
              (statementDueDate = new Date(
                  new Date(
                      detailsObj.pinswg_statementduedate ||
                          detailsObj.pinswg_statementsduedate
                  ).setHours(23, 59, 59, 999)
              )));

        isLPA &&
            currentView.caseReference.appealType != 846040019 &&
            currentView.caseReference.appealType != 846040011 &&
            currentView.caseReference.appealType != 846040015 &&
            currentView.caseReference.appealType != 846040016 &&
            todaysDate >= startDate &&
            todaysDate <= finalCommentsDate &&
            buildArr.push("Questionnaire");

        isLPA &&
            isDNS &&
            currentView.caseReference.appealType != 846040019 &&
            todaysDate >= startDate &&
            todaysDate <= finalCommentsDate &&
            buildArr.push("Local Impact Report");

        !isDNS &&
            currentView.caseReference.appealType != 846040004 &&
            todaysDate >= startDate &&
            todaysDate <= statementDueDate &&
            buildArr.push("Statement");

        isDNS &&
            !isLPA &&
            todaysDate >= startDate &&
            todaysDate <= statementDueDate &&
            buildArr.push("Statement");

        (currentView.caseReference.appealType != 846040004 ||
            (currentView.caseReference.appealType == 846040015 &&
                currentView.caseReference.specialistProcess != 846040001)) &&
            todaysDate >= statementDueDate &&
            todaysDate <= finalCommentsDate &&
            buildArr.push("Final comments");

        currentView.caseReference.appealType == 846040004 &&
            currentView.caseReference.specialistProcess != 846040001 &&
            todaysDate >= statementDueDate &&
            todaysDate <= finalCommentsDate &&
            buildArr.push("Final comments");

        //is LPA Advert part 3 no statement
        isLPA &&
            currentView.caseReference.appealType == 846040018 &&
            currentView.caseReference.specialistProcess == 846040000 &&
            buildArr.pop("Statements");

        return buildArr;
    };

    const repCapacityType = () => {
        return _.isEmpty(formObj["representationForm"])
            ? false
            : _.isEmpty(formObj["representationForm"].values)
            ? false
            : _.isEmpty(
                  formObj["representationForm"].values.representationCapacity
              )
            ? false
            : formObj["representationForm"].values.representationCapacity
                  .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
                  .toLowerCase();
    };

    const whichControl = () => {
        if (
            isLPA &&
            _.isEmpty(currentView.representationCapacity)
            // ||
            // (isLPA &&
            //     currentView.caseReference.hasOwnProperty("repDetails") &&
            //     !currentView.caseReference.repDetails.representationCapacity)
        ) {
            return (
                //setRepresentationCapacity("LPA"),
                <RepLPACapacitySelection
                    formObj={formObj}
                    capacityOptionsArr={capacityOptionsArr}
                    currentType={currentType}
                    casesObj={casesObj}
                    setRepresentationCapacity={setRepresentationCapacity}
                    setRepresentationSubmit={setRepresentationSubmit}
                    onHandleSubmit={onHandleSubmit}
                    currentView={currentView}
                    setSubmitBack={setSubmitBack}
                    props={props}
                    caseReference={caseReference}
                    setRepFileName={setRepFileName}
                    updateRepresentation={updateRepresentation}
                    setSavingStatus={setSavingStatus}
                    savingStatus={savingStatus}
                    setCurrentReference={setCurrentReference}
                />
            );
        } else {
            switch (
                (
                    currentView.representationCapacity ||
                    (currentView.caseReference.hasOwnProperty("repDetails") &&
                        currentView.caseReference.repDetails
                            .representationCapacity) ||
                    "false"
                ).toLowerCase()
            ) {
                case false:
                    <RepCapacitySelection
                        formObj={formObj}
                        capacityOptionsArr={capacityOptionsArr}
                        currentType={currentType}
                        casesObj={casesObj}
                        setRepresentationCapacity={setRepresentationCapacity}
                        setRepresentationSubmit={setRepresentationSubmit}
                        onHandleSubmit={onHandleSubmit}
                        currentView={currentView}
                        setSubmitBack={setSubmitBack}
                        props={props}
                        caseReference={caseReference}
                        setRepFileName={setRepFileName}
                        updateRepresentation={updateRepresentation}
                        setSavingStatus={setSavingStatus}
                        savingStatus={savingStatus}
                        setCurrentReference={setCurrentReference}
                    />;
                    break;
                case "appellant":
                case t(
                    "myrepresentations:capacity-options-arr-appellant"
                ).toLocaleLowerCase():
                    //setRepresentationCapacity("appellant");
                    return (
                        <RepAppellant
                            formObj={formObj}
                            appellantApplicantRepresentationArr={buildRepsArr(
                                detailsObj
                            )}
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                            onHandleSubmit={onHandleSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                            setRepFileName={setRepFileName}
                            updateRepresentation={updateRepresentation}
                            setSavingStatus={setSavingStatus}
                            savingStatus={savingStatus}
                            setCurrentReference={setCurrentReference}
                        />
                    );
                    break;
                case "lpa":
                case "LPA":
                    //setRepresentationCapacity("appellant");
                    //setRepresentationCapacity("LPA");
                    // useEffect(() => {
                    //     setRepresentationCapacity("LPA");
                    // }, []);

                    console.log(currentView.caseReference.appealType);
                    return (
                        <RepLPA
                            formObj={formObj}
                            appellantApplicantRepresentationArr={buildRepsArr(
                                detailsObj
                            )}
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                            onHandleSubmit={onHandleSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                            setShowQuestionnaireSection={
                                setShowQuestionnaireSection
                            }
                            showQuestionnaireSection={showQuestionnaireSection}
                            //setQuestionnaireCount={setQuestionnaireCount}
                            questionnaireCount={questionnaireCount}
                            setRepFileName={setRepFileName}
                            updateRepresentation={updateRepresentation}
                            setSavingStatus={setSavingStatus}
                            savingStatus={savingStatus}
                            setCurrentReference={setCurrentReference}
                        />
                    );
                    break;
                case "agent":
                case t(
                    "myrepresentations:capacity-options-arr-agent"
                ).toLowerCase():
                    //setRepresentationCapacity("agent");
                    return (
                        <RepAgent
                            formObj={formObj}
                            appellantApplicantRepresentationArr={buildRepsArr(
                                detailsObj
                            )}
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                            onHandleSubmit={onHandleSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                            setRepFileName={setRepFileName}
                            updateRepresentation={updateRepresentation}
                            setSavingStatus={setSavingStatus}
                            savingStatus={savingStatus}
                            setCurrentReference={setCurrentReference}
                        />
                    );
                    break;
                case "interestedparty":
                case t(
                    "myrepresentations:capacity-options-arr-interested"
                ).toLowerCase():
                    // setRepresentationCapacity("interestedpartyperson");
                    return (
                        <RepInterestedPartyPerson
                            formObj={formObj}
                            interestedPersonRepresentationArr={buildRepsArr(
                                detailsObj
                            )}
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                            onHandleSubmit={onHandleSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                            setRepFileName={setRepFileName}
                            updateRepresentation={updateRepresentation}
                            setSavingStatus={setSavingStatus}
                            savingStatus={savingStatus}
                            setCurrentReference={setCurrentReference}
                        />
                    );
                    break;
                case "landowner":
                    //setRepresentationCapacity("landowner");
                    return (
                        <RepLandOwner
                            formObj={formObj}
                            landOwnerRepresentationArr={buildRepsArr(
                                detailsObj
                            )}
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            onHandleSubmit={onHandleSubmit}
                            setRepresentationSubmit={setRepresentationSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                            setRepFileName={setRepFileName}
                            updateRepresentation={updateRepresentation}
                            setCurrentReference={setCurrentReference}
                        />
                    );
                    break;
                default:
                    return (
                        <RepCapacitySelection
                            formObj={formObj}
                            capacityOptionsArr={capacityOptionsArr}
                            currentType={currentType}
                            casesObj={casesObj}
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                            onHandleSubmit={onHandleSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                            caseReference={caseReference}
                            setRepFileName={setRepFileName}
                            updateRepresentation={updateRepresentation}
                            setCurrentReference={setCurrentReference}
                        />
                    );
            }
        }
    };

    const whichProgress = () => {
        {
            switch (currentView.caseReference.appealType) {
                case 846040000:
                case 846040001:
                case 846040025:
                case 846040004:
                case 846040018:
                case 846040003:
                case 846040009:
                case 846040008:
                case 846040017:
                    return (
                        <RepresentationProgress_s78
                            props={props}
                            containerID={props.props.accountDetails.containerID}
                            currentView={currentView}
                            showQuestionnaireSection={showQuestionnaireSection}
                            setShowQuestionnaireSection={
                                setShowQuestionnaireSection
                            }
                            // setQuestionnaireCount={setQuestionnaireCount}
                            questionnaireCount={questionnaireCount}
                        />
                    );
                    break;

                case 846040005:
                case 846040006:
                case 846040007:
                    return (
                        <RepresentationProgress_enforcement
                            props={props}
                            containerID={props.props.accountDetails.containerID}
                            currentView={currentView}
                            showQuestionnaireSection={showQuestionnaireSection}
                            setShowQuestionnaireSection={
                                setShowQuestionnaireSection
                            }
                            //setQuestionnaireCount={setQuestionnaireCount}
                            questionnaireCount={questionnaireCount}
                        />
                    );
                    break;
                default:
                    return <></>;
                    break;
            }
        }
    };

    const sortFileObj = (filelistObj) => {
        let blobList = filelistObj;

        function removeNullObjects(arr) {
            return arr.filter((obj) => obj !== null);
        }

        function removeObjectsWithUndefinedKey(arr, key) {
            return arr.filter((obj) => obj[key] !== undefined);
        }

        function removeEmptyObjects(arr) {
            return arr.filter((obj) => Object.keys(obj).length > 0);
        }

        blobList = removeNullObjects(blobList);
        blobList = removeEmptyObjects(blobList);
        blobList = removeObjectsWithUndefinedKey(blobList, "name");

        let buildAppealFilesArray = [];

        let filesUploadObj = field.input.value;

        for (let key in filesUploadObj) {
            typeof filesUploadObj[key].name != "undefined" &&
                buildAppealFilesArray.push({
                    "name": filesUploadObj[key].name,
                    "size": filesUploadObj[key].size,
                });
        }

        buildAppealFilesArray = buildAppealFilesArray.concat(blobList);

        function removeDuplicates(arr) {
            const seen = new Set();
            return arr.filter((obj) => {
                const serializedObj = JSON.stringify(obj);
                if (seen.has(serializedObj)) {
                    return false; // Skip this object (duplicate)
                }
                seen.add(serializedObj); // Add the serialized object to the "seen" set
                return true; // Keep this object
            });
        }

        buildAppealFilesArray = removeDuplicates(buildAppealFilesArray);

        blobList = buildAppealFilesArray;

        return blobList;
    };

    const updateRepresentation = async (
        values,
        sendSavedEmail,
        useSaveStatus
    ) => {
        let incidentId = props.appealType.caseReference.incidentid;
        let updateBody = values || {};
        const buildFileArray = [];
        let newbuildArr = [];

        setSavingStatus(useSaveStatus);

        Object.assign(values, {
            "containerID": props.props.accountDetails.containerID,
            "appealType":
                props.props.currentView.caseReference.appealType ||
                props.props.currentView.caseReference.repDetails.appealType,
            "incidentID":
                props.props.currentView.caseReference.incidentid ||
                props.props.currentView.caseReference.repDetails.incidentid,
            "caseRef": props.props.currentView.caseReference.currentReference,
            "casereference":
                props.props.currentView.caseReference.currentReference,
            "pinswg_questionnaireduedate":
                detailsObj.pinswg_questionnaireduedate,
            "pinswg_statementduedate": detailsObj.pinswg_statementduedate,
            "pinswg_statementsduedate": detailsObj.pinswg_statementsduedate,
            "pinswg_finalcommentsduedate":
                detailsObj.pinswg_finalcommentsduedate,
            "pinswg_name":
                props.props.currentView.caseReference.currentReference,
            "firstname": props.props.accountDetails.accountDetails.firstname,
            "lastname": props.props.accountDetails.accountDetails.lastname,
            "emailAddress":
                props.props.accountDetails.accountDetails.emailaddress1,
            "siteAddress":
                detailsObj.pinswg_siteaddressline1 +
                (detailsObj.pinswg_siteaddressline2 != null
                    ? " " + detailsObj.pinswg_siteaddressline2 + " "
                    : " ") +
                detailsObj.pinswg_siteaddresstown +
                " " +
                detailsObj.pinswg_siteaddresspostcode,
            "pinswg_siteaddressline1": detailsObj.pinswg_siteaddressline1,
            "pinswg_siteaddressline2": detailsObj.pinswg_siteaddressline2,
            "pinswg_siteaddresstown": detailsObj.pinswg_siteaddresstown,
            "pinswg_siteaddresspostcode": detailsObj.pinswg_siteaddresspostcode,
            "pinswg_lpareference": resultsObj.pinswg_lpareference,
            "_pinswg_appellant_value": detailsObj["_pinswg_appellant_value"],
            "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue":
                detailsObj[
                    "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
                ],
            "_pinswg_localplanningauthority_value":
                detailsObj["_pinswg_localplanningauthority_value"] ||
                detailsObj["_pinswg_associatedlpa_value"],
            "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue":
                detailsObj[
                    "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue"
                ] ||
                detailsObj[
                    "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                ],
            "representationCapacity": router.query.hasOwnProperty("state")
                ? router.query.state == "edit"
                    ? props.props.currentView.representationCapacity
                    : values.representationCapacity
                : isLPA
                ? "LPA"
                : values.representationCapacity,
            "locale": router.locale,
        });

        // "pinswg_name": "2022-11-29-IP-REP_BOND_1",

        updateBody = setRepFileName(values);

        Object.assign(updateBody, {
            "pinswg_name":
                props.props.currentView.caseReference.currentReference,
            "containerID": props.props.accountDetails.containerID,
            "appealType":
                props.props.currentView.caseReference.appealType ||
                props.props.currentView.caseReference.repDetails.appealType,
            "casereference":
                props.props.currentView.caseReference.currentReference,
            "incidentID":
                props.props.currentView.caseReference.incidentid ||
                props.props.currentView.caseReference.repDetails.incidentid,
            "caseRef": props.props.currentView.caseReference.currentReference,
        });

        updateBody = JSON.stringify(updateBody);
        updateBody = updateBody.replace(/:"Yes"/gm, `:true`);
        updateBody = updateBody.replace(/:"No"/gm, `:false`);
        updateBody = JSON.parse(updateBody);

        Object.keys(updateBody).forEach((key) => {
            if (updateBody[key] === null) {
                delete updateBody[key];
            }
            if (key.indexOf("_") == 0) {
                delete updateBody[key];
            }
        });

        const reference = "PEDW-PARTIAL-REP";
        const templateId = "021b0a7b-df00-41f1-b94e-c269bee98c75";
        const emailAddress = props.props.accountDetails.loggedinUserEmail;
        const personalisation = {
            "caseReference": props.caseReference,
            "emailAddress": props.props.accountDetails.loggedinUserEmail,
            "returnLink": "",
            "linkExpiry": 10 * 60,
        };

        props.currentView.representationSubmit == "true"
            ? (sendSavedEmail == true &&
                  sendEmail(
                      templateId,
                      emailAddress,
                      personalisation,
                      reference
                  ),
              useSaveStatus &&
                  router.replace(
                      router.locale != "en"
                          ? router.locale + "/myportal"
                          : "/myportal"
                  ))
            : useSaveStatus
            ? (Object.assign(values, {
                  "filesList": props.currentView.fileList,
              }),
              (values = updateLinks(values)),
              uploadRepresentationFiles(values),
              router.replace(
                  router.locale != "en"
                      ? router.locale + "/myportal"
                      : "/myportal"
              ))
            : Object.assign(values, {
                  "filesList": props.currentView.fileList,
              }),
            console.log("Rep Updated - ", props.caseReference),
            (values = updateLinks(values)),
            uploadRepresentationFiles(values);
    };

    const onHandleSubmit = (values) => {
        values = setRepFileName(values);

        //console.log("onHandleSubmit form values - ", JSON.stringify(values));

        const buildFileArray = [];

        //console.log("attached docs: - ", buildFileArray);

        let setCaseDetailsObj = router.query.hasOwnProperty("state")
            ? router.query.state == "edit"
                ? props.props.myRepresentations.myRepresentations
                : props.props.searchResultsObj.searchDetailsObj
            : props.currentType == "watchedCases"
            ? props.props.watchedCases.watchedCasesDetails
            : props.props.searchResultsObj.searchDetailsObj;

        router.query.hasOwnProperty("state") &&
            router.query.state == "edit" &&
            setRepresentationSubmit(false);

        var detailsObj = {};

        detailsObj = jsonpath(
            '$..[?(@.pinswg_name=="' + caseReference + '")]',
            setCaseDetailsObj
        );

        detailsObj = detailsObj[0];

        // console.log(
        //     "Has data from form:",
        //     formObj.hasOwnProperty("representationForm") &&
        //         formObj.representationForm.hasOwnProperty("values")
        // );

        formObj.hasOwnProperty("representationForm") &&
            !router.query.hasOwnProperty("state") &&
            formObj.representationForm.hasOwnProperty("values") &&
            (Object.assign(values, formObj.representationForm.values),
            Object.assign(values, {
                "containerID": props.props.accountDetails.containerID,
                "appealType":
                    props.props.currentView.caseReference.appealType ||
                    props.props.currentView.caseReference.repDetails.appealType,
                "incidentID":
                    props.props.currentView.caseReference.incidentid ||
                    props.props.currentView.caseReference.repDetails.incidentid,
                "caseRef":
                    props.props.currentView.caseReference.currentReference,
                "casereference":
                    props.props.currentView.caseReference.currentReference,
                "pinswg_questionnaireduedate":
                    detailsObj.pinswg_questionnaireduedate,
                "pinswg_endofrepresentationperiod":
                    detailsObj.pinswg_endofrepresentationperiod,
                "pinswg_applicationacceptedasvalid":
                    detailsObj.pinswg_applicationacceptedasvalid,
                "pinswg_statementduedate": detailsObj.pinswg_statementduedate,
                "pinswg_statementsduedate": detailsObj.pinswg_statementsduedate,
                "pinswg_finalcommentsduedate":
                    detailsObj.pinswg_finalcommentsduedate,
                "pinswg_name":
                    props.props.currentView.caseReference.currentReference,
                "firstname":
                    props.props.accountDetails.accountDetails.firstname,
                "lastname": props.props.accountDetails.accountDetails.lastname,
                "emailAddress":
                    props.props.accountDetails.accountDetails.emailaddress1,
                "siteAddress":
                    detailsObj.pinswg_siteaddressline1 +
                    (detailsObj.pinswg_siteaddressline2 != null
                        ? " " + detailsObj.pinswg_siteaddressline2 + " "
                        : " ") +
                    detailsObj.pinswg_siteaddresstown +
                    " " +
                    detailsObj.pinswg_siteaddresspostcode,
                "pinswg_siteaddressline1": detailsObj.pinswg_siteaddressline1,
                "pinswg_siteaddressline2": detailsObj.pinswg_siteaddressline2,
                "pinswg_siteaddresstown": detailsObj.pinswg_siteaddresstown,
                "pinswg_siteaddresspostcode":
                    detailsObj.pinswg_siteaddresspostcode,
                "pinswg_lpareference": resultsObj.pinswg_lpareference,
                "_pinswg_appellant_value":
                    detailsObj["_pinswg_appellant_value"],
                "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue":
                    detailsObj[
                        "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
                    ],
                "_pinswg_localplanningauthority_value":
                    detailsObj["_pinswg_localplanningauthority_value"] ||
                    detailsObj["_pinswg_associatedlpa_value"],
                "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue":
                    detailsObj[
                        "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue"
                    ] ||
                    detailsObj[
                        "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                    ],
                "representationCapacity": router.query.hasOwnProperty("state")
                    ? router.query.state == "edit"
                        ? props.props.currentView.representationCapacity
                        : values.representationCapacity
                    : isLPA
                    ? "LPA"
                    : values.representationCapacity,
                "locale": router.locale,
            }));

        if (currentView.representationSubmit != true) {
            if (_.isEmpty(currentView.representationCapacity)) {
                if (isLPA) {
                    setRepresentationCapacity("LPA");
                } else {
                    setRepresentationCapacity(
                        values.representationCapacity
                            .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
                            .toLowerCase()
                    );
                }
            } else {
                if (values.representationType == "Questionnaire") {
                    if (
                        questionnaireCount != 0 &&
                        showQuestionnaireSection < questionnaireCount
                    ) {
                        setShowQuestionnaireSection(
                            showQuestionnaireSection + 1
                        );
                        updateRepresentation(values, false, false);
                    } else {
                        updateRepresentation(values, false, false);
                        setRepresentationSubmit(true);
                    }
                } else {
                    updateRepresentation(values, false, false);
                    setRepresentationSubmit(true);
                }
            }
            window.scrollTo({ top: 0, behavior: "smooth" });
        } else {
            if (currentView.representationSubmit == true) {
                console.log("capacity", currentView.representationCapacity);
                console.log("has errors:", props.invalid);
                Object.assign(values, {
                    "locale": router.locale,
                    "repComplete": currentView.caseReference.currentReference,
                });
                props.invalid == false &&
                    updateRepresentation(values, false, false);
                //   values.hasOwnProperty("representationDocuments") &&
                //       (values.representationDocuments.map((Blob) =>
                //           buildFileArray.push({
                //               "name": Blob.name,
                //               "size": Blob.size,
                //           })
                //       ),
                //       Object.assign(values, {
                //           "filesList": buildFileArray,
                //       })),
                // console.log(
                //     "====================== rep lpa payload:\n",
                //     JSON.stringify(values)
                // );
                setFinaliseAppealProcess(true);
                generateRepPDF(
                    values,
                    props.props.accountDetails.containerID,
                    currentView.caseReference.currentReference
                ).then((data) => {
                    console.log(data);
                    data.status == "success" &&
                        ((values = updateLinks(values)),
                        uploadRepresentationFiles(values),
                        setRepresentationSubmit(true),
                        setRepresentationSubmitConfirmation(true));
                });
            } else {
                console.log("not updated");
            }
        }
    };

    const cleanFilesList = (blobList) => {
        let newblobList = blobList.filesList;
        function removeNullObjects(arr) {
            if (arr.length === 0) {
                return arr;
            }
            return arr.filter((obj) => obj !== null);
        }

        function removeObjectsWithUndefinedKey(arr, key) {
            if (arr.length === 0) {
                return arr;
            }
            return arr.filter((obj) => obj[key] !== undefined);
        }

        function removeEmptyObjects(arr) {
            if (arr.length === 0) {
                return arr;
            }
            return arr.filter(
                (obj) =>
                    obj &&
                    typeof obj === "object" &&
                    Object.keys(obj).length > 0
            );
        }

        newblobList = removeNullObjects(newblobList);
        newblobList = removeEmptyObjects(newblobList);
        newblobList = removeObjectsWithUndefinedKey(newblobList, "name");

        Object.assign(blobList, {
            "filesList": newblobList,
        });

        return blobList;
    };

    const uploadRepresentationFiles = (values) => {
        values = values.hasOwnProperty("filesList")
            ? cleanFilesList(values)
            : values;

        // get filelists from values object
        let fileListObj = _.filter(values, function (v, key) {
            return _.includes(key, "representationDocuments");
        });

        // console.log(
        //     "\n////////////////////////\n upload files:",
        //     values.containerID,
        //     "\n////////////////////////\n fileListObj:",
        //     fileListObj,
        //     "\n////////////////////////\n"
        // );

        var dataObj = values;

        (values = updateLinks(values)),
            uploadRepFiles(
                dataObj,
                [{}],
                values.containerID,
                props.caseReference + "/" + dataObj.repfile_name
            ).then((data) => {
                return data;
            });
    };

    const repForm = props.props.form;

    return (
        <div>
            <form onSubmit={handleSubmit(onHandleSubmit)}>
                {currentView.representationSubmit == true ? (
                    <RepCompleteSubmit
                        formObj={formObj}
                        capacityOptionsArr={capacityOptionsArr}
                        currentType={currentType}
                        casesObj={casesObj}
                        setRepresentationCapacity={setRepresentationCapacity}
                        setRepresentationSubmit={setRepresentationSubmit}
                        currentView={currentView}
                        setSubmitBack={setSubmitBack}
                        setRepresentationMessageSent={
                            setRepresentationMessageSent
                        }
                        setRepresentationSubmitConfirmation={
                            setRepresentationSubmitConfirmation
                        }
                        setShowQuestionnaireSection={
                            setShowQuestionnaireSection
                        }
                        showQuestionnaireSection={showQuestionnaireSection}
                        props={props}
                        questionnaireCount={questionnaireCount}
                        finaliseAppealProcess={finaliseAppealProcess}
                        setFinaliseAppealProcess={setFinaliseAppealProcess}
                    />
                ) : (
                    <>
                        <h1 className="govuk-heading-l">
                            {t(
                                "myrepresentations:make-a-representation-on-label"
                            )}{" "}
                            {currentView.caseReference.currentReference}{" "}
                        </h1>
                        <div id="rep-form">
                            <div className="govuk-grid-column-three-quarters wgForm">
                                {whichControl()}
                            </div>

                            <div className="govuk-grid-column-one-quarter">
                                {" "}
                                <div className="card">
                                    <div className="card-body">
                                        <h2 className="govuk-heading-s">
                                            {t(
                                                "myrepresentations:timetable-title"
                                            )}{" "}
                                        </h2>
                                        <div className="govuk-summary-list">
                                            <div className="govuk-body-s">
                                                {currentView.caseReference
                                                    .appealType == 846040011
                                                    ? t(
                                                          "myrepresentations:local-impact-report"
                                                      )
                                                    : t(
                                                          "myrepresentations:questionnaire-due-label"
                                                      )}
                                                :
                                                <span className="govuk-body-s">
                                                    {" "}
                                                    {detailsObj.hasOwnProperty(
                                                        "pinswg_questionnaireduedate"
                                                    ) ||
                                                    detailsObj.hasOwnProperty(
                                                        "pinswg_endofrepresentationperiod"
                                                    )
                                                        ? formatDates(
                                                              detailsObj.pinswg_questionnaireduedate ||
                                                                  detailsObj.pinswg_endofrepresentationperiod
                                                          )
                                                        : "N/A"}
                                                </span>
                                            </div>
                                            <div className="govuk-body-s">
                                                {t(
                                                    "myrepresentations:statements-due-label"
                                                )}
                                                :
                                                <span className="govuk-body-s">
                                                    {" "}
                                                    {formatDates(
                                                        detailsObj.pinswg_statementduedate ||
                                                            detailsObj.pinswg_statementsduedate ||
                                                            detailsObj.pinswg_endofrepresentationperiod
                                                    )}
                                                </span>
                                            </div>
                                            {currentView.caseReference
                                                .appealType != 846040011 && (
                                                <div className="govuk-body-s">
                                                    {t(
                                                        "myrepresentations:final-comments-due-label"
                                                    )}
                                                    :
                                                    <span className="govuk-body-s">
                                                        {" "}
                                                        {formatDates(
                                                            detailsObj.pinswg_finalcommentsduedate
                                                        )}
                                                    </span>
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    {formObj.hasOwnProperty(
                                        "representationForm"
                                    ) &&
                                        formObj[
                                            "representationForm"
                                        ].hasOwnProperty("values") &&
                                        formObj[
                                            "representationForm"
                                        ].values.hasOwnProperty(
                                            "representationType"
                                        ) &&
                                        formObj["representationForm"].values
                                            .representationType ==
                                            "Questionnaire" &&
                                        whichProgress()}
                                </div>
                            </div>
                        </div>
                    </>
                )}
            </form>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        currentView: state.currentView,
        myRepresentations: state.myRepresentations,
        initialValues: state.currentView.caseReference.repDetails,
        //form: state.form,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setRepresentationCapacity: (representationCapacity) => {
            dispatch(setRepresentationCapacity(representationCapacity));
        },
        setRepresentationSubmit: (representationSubmit) => {
            dispatch(setRepresentationSubmit(representationSubmit));
        },
        setSubmitBack: () => {
            dispatch(setRepresentationSubmit(false));
        },
        setRepresentationSubmitConfirmation: () => {
            dispatch(setRepresentationSubmitConfirmation(true));
        },
        setRepresentationMessageSent: (messageSent) => {
            dispatch(setRepresentationMessageSent(messageSent));
        },
        setRepresentationReset: () => {
            dispatch(setRepresentationReset());
        },
    };
};

const selector = formValueSelector("representationForm");

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "representationForm",
        destroyOnUnmount: false,
        enableReinitialize: true,
    })(MakeRepresentation)
);