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

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

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

    const [clearRepForm, setClearRepForm] = useState(false);
    const [savingStatus, setSavingStatus] = useState(false);
    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,
        initialValues,
    } = props;
    const formObj = props.props.form;
    let setCaseQueryObj = props[currentType] || {};
    var casesObj = {};

    const [showQuestionnaireSection, setShowQuestionnaireSection] = useState(1);
    const [questionnaireCount, setQuestionnaireCount] = useState(0);

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

            const repDate = new Date();

            let day = repDate.getDate();
            let month = repDate.getMonth() + 1;
            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":
                    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 +
                      "_-_" +
                      values.lastname.replace(
                          /[\s~`!@#$%^&*(){}\[\];:"'<,.>?\/\\|_+=-]/g,
                          ""
                      ) +
                      "_" +
                      values.firstname.replace(
                          /[\s~`!@#$%^&*(){}\[\];:"'<,.>?\/\\|_+=-]/g,
                          ""
                      ),
            });
        }

        return values;
    };

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

    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")
          );
    console.log(props.props.currentView);

    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;

    var detailsObj = {};

    detailsObj = 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)),
              (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 &&
            todaysDate >= startDate &&
            todaysDate <= questionnaireDate &&
            buildArr.push("Questionnaire");

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

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

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

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

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

        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)) {
            return (
                <RepLPACapacitySelection
                    formObj={formObj}
                    capacityOptionsArr={capacityOptionsArr}
                    currentType={currentType}
                    casesObj={casesObj}
                    setRepresentationCapacity={"LPA"}
                    setRepresentationSubmit={setRepresentationSubmit}
                    onHandleSubmit={onHandleSubmit}
                    currentView={currentView}
                    setSubmitBack={setSubmitBack}
                    props={props}
                    caseReference={caseReference}
                    setRepFileName={setRepFileName}
                    updateRepresentation={updateRepresentation}
                />
            );
        } else {
            switch (currentView.representationCapacity) {
                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}
                    />;
                    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}
                        />
                    );
                    break;
                case "lpa":
                    //setRepresentationCapacity("appellant");
                    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}
                        />
                    );
                    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}
                        />
                    );
                    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}
                        />
                    );
                    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}
                        />
                    );
                    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}
                        />
                    );
            }
        }
    };

    const whichProgress = () => {
        {
            switch (currentView.caseReference.appealType) {
                case 846040000:
                case 846040001:
                case 846040006:
                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 updateRepresentation = async (
        values,
        sendSavedEmail,
        useSaveStatus
    ) => {
        let incidentId = props.appealType.caseReference.incidentid;
        let updateBody = values || {};
        const buildFileArray = [];
        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 +
                " " +
                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_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"],
            "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue":
                detailsObj[
                    "_pinswg_localplanningauthority_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
            ? (values.hasOwnProperty("representationDocuments") &&
                  (values.representationDocuments.map((Blob) =>
                      buildFileArray.push({
                          "name": Blob.name,
                          "size": Blob.size,
                      })
                  ),
                  Object.assign(values, {
                      "filesList": buildFileArray,
                  })),
              generateRepPDF(
                  values,
                  props.props.accountDetails.containerID,
                  currentView.caseReference.currentReference
              ),
              uploadRepresentationFiles(values),
              router.replace(
                  router.locale != "en"
                      ? router.locale + "/myportal"
                      : "/myportal"
              ))
            : (values.hasOwnProperty("representationDocuments") &&
                  (values.representationDocuments.map((Blob) =>
                      buildFileArray.push({
                          "name": Blob.name,
                          "size": Blob.size,
                      })
                  ),
                  Object.assign(values, {
                      "filesList": buildFileArray,
                  })),
              uploadRepresentationFiles(values),
              generateRepPDF(
                  values,
                  props.props.accountDetails.containerID,
                  currentView.caseReference.currentReference
              ));
    };

    const onHandleSubmit = (values) => {
        window.scrollTo({ top: 0, behavior: "smooth" });
        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 +
                    " " +
                    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_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"],
                "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue":
                    detailsObj[
                        "_pinswg_localplanningauthority_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,
            }));
        currentView.representationSubmit != true
            ? _.isEmpty(currentView.representationCapacity)
                ? isLPA
                    ? setRepresentationCapacity("lpa")
                    : setRepresentationCapacity(
                          values.representationCapacity
                              .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
                              .toLowerCase()
                      )
                : questionnaireCount != 0 &&
                  showQuestionnaireSection < questionnaireCount
                ? (setShowQuestionnaireSection(showQuestionnaireSection + 1),
                  updateRepresentation(values, false, false))
                : (updateRepresentation(values, false, false),
                  setRepresentationSubmit(true))
            : currentView.representationSubmit == true
            ? (console.log("capacity", currentView.representationCapacity),
              console.log("has errors:", props.invalid),
              Object.assign(values, { "locale": router.locale }),
              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)
              ),
              generateRepPDF(
                  values,
                  props.props.accountDetails.containerID,
                  currentView.caseReference.currentReference
              ),
              uploadRepresentationFiles(values),
              setRepresentationSubmitConfirmation(true))
            : console.log("nit updated");

        //window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
    };

    const uploadRepresentationFiles = (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;

        for (let key in dataObj) {
            _.includes(key, "representationDocuments") == true &&
                delete dataObj[key];
        }

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

    const repForm = props.props.form;

    try {
        let value = props.initialValues;
        setRepresentationCapacity(
            props.initialValues.representationCapacity.toLowerCase()
        );
        //setRepresentationSubmit(false);
    } catch {
        console.log("not has props");
    }

    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
                        }
                        props={props}
                    />
                ) : (
                    <>
                        {!session ? (
                            <>
                                <div>
                                    <p className="govuk-body">
                                        Some text in here to explain about
                                        raising a representation and why logging
                                        in
                                    </p>
                                </div>
                                <button
                                    className="govuk-button withChevron govuk-button-cta"
                                    type="button"
                                    onClick={() => signIn()}
                                >
                                    Sign in to raise representation
                                </button>
                            </>
                        ) : (
                            <>
                                <h1 className="govuk-heading-l">
                                    {t(
                                        "myrepresentations:make-a-representation-on-label"
                                    )}{" "}
                                    {currentView.caseReference.currentReference}{" "}
                                </h1>
                                {currentView.caseReference.caseReference}
                                <div id="rep-form">
                                    <div className="govuk-grid-column-three-quarters">
                                        {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"
                                                    )}{" "}
                                                    {currentView.caseReference
                                                        .appealType ==
                                                        846040011}
                                                </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">
                                                            {" "}
                                                            {formatDates(
                                                                detailsObj.pinswg_questionnaireduedate ||
                                                                    detailsObj.pinswg_endofrepresentationperiod
                                                            )}
                                                        </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>{" "}
                                        {typeof props.props.currentView
                                            .representationCapacity !=
                                            "undefined" &&
                                            props.props.currentView
                                                .representationCapacity.length >
                                                0 && (
                                                <div className="govuk-grid-row">
                                                    {savingStatus ? (
                                                        <span className=" progress-save-active">
                                                            {router.locale ==
                                                            "cy"
                                                                ? "Nôl data"
                                                                : "Saving data"}
                                                            <img
                                                                className="data-loading-icon"
                                                                src="/assets/images/loading.gif"
                                                                alt={
                                                                    router.locale ==
                                                                    "cy"
                                                                        ? "Nôl data"
                                                                        : "Saving data"
                                                                }
                                                            />
                                                        </span>
                                                    ) : (
                                                        <button
                                                            className="govuk-button govuk-button--secondary progress-save "
                                                            onClick={() => {
                                                                let valuesObj =
                                                                    props.props
                                                                        .form[
                                                                        props
                                                                            .form
                                                                    ].values ||
                                                                    {};

                                                                console.log(
                                                                    "valuesobj:",
                                                                    valuesObj
                                                                );

                                                                delete valuesObj[
                                                                    "_pinswg_appellant_value"
                                                                ];

                                                                console.log(
                                                                    "on save:",
                                                                    valuesObj
                                                                );
                                                                updateRepresentation(
                                                                    valuesObj,
                                                                    false,
                                                                    true
                                                                );
                                                            }}
                                                        >
                                                            {t(
                                                                "common:save-exit-button"
                                                            )}
                                                        </button>
                                                    )}
                                                </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(reset("representationForm"));
            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)
);