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

import { 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 ConsultationAgent from "./consultationAgent";
import ConsultationAppellant from "./consultationAppellant";
import ConsultationInterestedPartyPerson from "./consultationInterestedPartyPerson";
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 appealType = currentView.caseReference.appealType;
    const accountDetails = props.props.accountDetails.accountDetails;
    const caseReferenceObj = props.props.currentView.caseReference;

    const updateQuestionnaireCount = () => {
        const countMap = {
            846040000: 7,
            846040001: 7,
            846040025: 7,
            846040004: 7,
            846040018: 7,
            846040003: 7,
            846040009: 7,
            846040008: 7,
            846040005: 9,
            846040006: 9,
            846040007: 9,
        };

        return countMap[appealType] || 7;
    };

    let questionnaireCount = updateQuestionnaireCount();

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

    const isNRW = currentView.caseReference?.isNRW;

    const setRepFileName = (values) => {
        if (
            !values.hasOwnProperty("representationCapacity") ||
            !values.hasOwnProperty("representationType")
        ) {
            return values;
        }

        const repCapMap = {
            [t("myrepresentations:capacity-options-arr-appellant")]: "APP",
            [t("myrepresentations:capacity-options-arr-agent")]: "APP", // agent treated as appellant proxy
            [t("myrepresentations:capacity-options-arr-interested")]: "IP",
            "Land Owner": "LO",
            lpa: "LPA",
            LPA: "LPA",
            NRW: "NRW",
        };

        const repTypeMap = {
            Statement: "Statement",
            "Statement of common ground": "SCG",
            "Written statement": "WS",
            "Written statement of evidence": "WSE",
            Questionnaire: "Questionnaire",
            "Final comments": "Comments",
            "Consultation Response": "Consultation_Response",
            "Local Impact Report": "Local_Impact_Report",
            "Marine Impact Report": "Marine_Impact_Report",
            Other: "OTHER",
        };

        const now = new Date();
        const pad = (num) => String(num).padStart(2, "0");

        const dateStr = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(
            now.getDate()
        )}-${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(
            now.getSeconds()
        )}`;

        const repCap = repCapMap[values.representationCapacity] || "";
        const repType = repTypeMap[values.representationType] || "";

        const sanitize = (str) =>
            str.replace(/[\s~`!@#$%^&*(){}\[\];:"'<,.>?\/\\|_+=-]/g, "");

        const namePart = isLPA
            ? sanitize(values.onBehalfOfLPA || "")
            : `${sanitize(values.lastname || "")}_${sanitize(
                  values.firstname || ""
              )}`;

        values.repfile_name =
            values.repfile_name ||
            `${dateStr}_-_${repCap}_-_${repType}_-_${namePart}`;

        return values;
    };

    isLPA && setRepresentationCapacity("LPA");

    const getCasePath = () => {
        switch (currentType) {
            case "searchResultsObj":
                return {
                    path: `$..[?(@ && @.title=="${caseReference}")]`,
                    json: setCaseQueryObj,
                };
            case "watchedCases":
                return {
                    path: `$..[?(@ && @.ticketnumber=="${caseReference}")]`,
                    json: watchedCases,
                };
            default:
                return {
                    path: `$..[?(@ && @.reference=="${caseReference}")]`,
                    json: setCaseQueryObj,
                };
        }
    };

    const { path, json } = getCasePath();
    casesObj = jsonpath({ path, json, eval: true });
    casesObj = Object.assign({}, ...casesObj);

    var detailsObj = {};

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

    const shouldIncludeInterested =
        appealType !== 846040017 ||
        caseReferenceObj.specialistProcess !== 846040000;

    if (shouldIncludeInterested) {
        capacityOptionsArr.push(
            t("myrepresentations:capacity-options-arr-interested")
        );
    }

    const isEditState = router.query.state === "edit";
    const hasState = router.query.hasOwnProperty("state");

    const getCaseDetailsObj = () => {
        if (hasState) {
            return isEditState
                ? props.props.myRepresentations.myRepresentations
                : props.props.searchResultsObj.searchDetailsObj;
        }
        return props.currentType === "watchedCases"
            ? props.props.watchedCases.watchedCasesDetails
            : props.props.searchResultsObj.searchDetailsObj;
    };

    const getCaseResultsObj = () => {
        if (hasState) {
            return isEditState
                ? props.props.myRepresentations.myRepresentations
                : props.props.searchResultsObj.searchResultsObj;
        }
        return props.currentType === "watchedCases"
            ? props.props.watchedCases.watchedCasesDetails
            : props.props.searchResultsObj.searchResultsObj;
    };

    const setCaseDetailsObj = getCaseDetailsObj();
    const setCaseResultsObj = getCaseResultsObj();

    let resultsObj = jsonpath({
        path: `$..[?(@ && @.ticketnumber=="${currentView.caseReference.currentReference}")]`,
        json: setCaseResultsObj,
        eval: true,
    })[0];

    // let detailsObj;

    if (hasState && isEditState) {
        detailsObj = jsonpath({
            path: `$..[?(@ && @.repfile_name=="${router.query.created}")]`,
            json: setCaseDetailsObj,
            eval: true,
        })[0];
    } else {
        detailsObj = jsonpath({
            path: `$..[?(@ && @.pinswg_name=="${currentView.caseReference.currentReference}")]`,
            json: setCaseDetailsObj,
            eval: true,
        })[0];
    }

    const buildRepsArr = (detailsObj) => {
        const buildArr = [];
        const todaysDate = new Date();

        const isDNS = appealType === 846040011;
        const isSIPS = appealType === 846040002;

        // Determine key dates based on appeal type
        const startDate = new Date(
            isDNS
                ? detailsObj.pinswg_applicationacceptedasvalid
                : detailsObj.pinswg_startdate || detailsObj.pinswg_startdates
        );

        const questionnaireDate = new Date(
            isDNS
                ? detailsObj.pinswg_endofrepresentationperiod
                : detailsObj.pinswg_questionnaireduedate
        );
        questionnaireDate.setHours(23, 59, 59, 999);

        const finalCommentsDate = new Date(
            isDNS
                ? detailsObj.pinswg_endofrepresentationperiod
                : detailsObj.pinswg_finalcommentsduedate
        );
        finalCommentsDate.setHours(23, 59, 59, 999);

        const statementDueDate = new Date(
            isDNS
                ? detailsObj.pinswg_endofrepresentationperiod
                : detailsObj.pinswg_statementduedate ||
                  detailsObj.pinswg_statementsduedate
        );
        statementDueDate.setHours(23, 59, 59, 999);

        // Shared condition
        const isWithin = (start, end) =>
            todaysDate >= start && todaysDate <= end;
        const notAppeal = (...types) => !types.includes(appealType);

        // Questionnaire
        if (
            isLPA &&
            notAppeal(846040019, 846040011, 846040015, 846040016) &&
            isWithin(startDate, finalCommentsDate)
        ) {
            buildArr.push("Questionnaire");
        }

        // DNS LPA Documents
        if (
            isLPA &&
            isDNS &&
            appealType !== 846040019 &&
            isWithin(startDate, finalCommentsDate)
        ) {
            buildArr.push("Local Impact Report", "Statement");
        }

        // Non-DNS Statement
        if (
            !isDNS &&
            appealType !== 846040004 &&
            isWithin(startDate, statementDueDate)
        ) {
            buildArr.push("Statement");
        }

        // DNS Non-LPA Statement
        if (isDNS && !isLPA && isWithin(startDate, statementDueDate)) {
            buildArr.push("Statement");
        }

        // Final Comments
        const isSpecialistNonHearing =
            currentView.caseReference.specialistProcess !== 846040001;

        if (
            (appealType !== 846040004 ||
                (appealType === 846040015 && isSpecialistNonHearing)) &&
            isWithin(statementDueDate, finalCommentsDate)
        ) {
            buildArr.push("Final comments");
        }

        if (
            appealType === 846040004 &&
            isSpecialistNonHearing &&
            isWithin(statementDueDate, finalCommentsDate)
        ) {
            buildArr.push("Final comments");
        }

        // Remove "Statement" for LPA Advert Part 3 (no statement)
        if (
            isLPA &&
            appealType === 846040018 &&
            currentView.caseReference.specialistProcess === 846040000
        ) {
            const index = buildArr.indexOf("Statement");
            if (index !== -1) buildArr.splice(index, 1);
        }

        // SIPS-related documents
        if (isSIPS) {
            const capacity = repCapacityType();
            if (capacity === "appellant") {
                buildArr.push("Consultation Response");
            } else {
                buildArr.push("Consultation Response", "Local Impact Report");
            }

            if (isNRW) {
                buildArr.push("Marine Impact Report");
            }
        }

        return buildArr;
    };

    const repCapacityType = () => {
        const repForm = formObj["representationForm"];
        if (
            !repForm ||
            !repForm.values ||
            !repForm.values.representationCapacity
        ) {
            return false;
        }

        return repForm.values.representationCapacity
            .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
            .toLowerCase();
    };

    const whichControl = () => {
        const commonProps = {
            formObj,
            setRepresentationCapacity,
            setRepresentationSubmit,
            onHandleSubmit,
            currentView,
            setSubmitBack,
            props,
            setRepFileName,
            updateRepresentation,
            setSavingStatus,
            savingStatus,
            setCurrentReference,
        };

        const getNormalizedCapacity = () => {
            const rawCapacity =
                currentView.representationCapacity ||
                currentView.caseReference?.repDetails?.representationCapacity ||
                "false";
            return rawCapacity.toLowerCase();
        };

        if (
            isLPA &&
            (!currentView.representationCapacity ||
                currentView.representationCapacity === "")
        ) {
            return (
                <RepLPACapacitySelection
                    {...commonProps}
                    capacityOptionsArr={capacityOptionsArr}
                    currentType={currentType}
                    casesObj={casesObj}
                    caseReference={caseReference}
                />
            );
        }

        const capacity = getNormalizedCapacity();

        switch (capacity) {
            case "appellant":
            case "apelydd":
            case "apelydd":
            case t(
                "myrepresentations:capacity-options-arr-appellant"
            ).toLowerCase(): {
                const Component =
                    appealType === 846040002
                        ? ConsultationAppellant
                        : RepAppellant;
                return (
                    <Component
                        {...commonProps}
                        appellantApplicantRepresentationArr={buildRepsArr(
                            detailsObj
                        )}
                    />
                );
            }

            case "lpa":
            case "lpa": {
                return (
                    <RepLPA
                        {...commonProps}
                        appellantApplicantRepresentationArr={buildRepsArr(
                            detailsObj
                        )}
                        setShowQuestionnaireSection={
                            setShowQuestionnaireSection
                        }
                        showQuestionnaireSection={showQuestionnaireSection}
                        questionnaireCount={questionnaireCount}
                    />
                );
            }

            case "agent":
            case "asiant":
            case "asiant":
            case t(
                "myrepresentations:capacity-options-arr-agent"
            ).toLowerCase(): {
                const Component =
                    appealType === 846040002 ? ConsultationAgent : RepAgent;
                return (
                    <Component
                        {...commonProps}
                        appellantApplicantRepresentationArr={buildRepsArr(
                            detailsObj
                        )}
                    />
                );
            }

            case "interestedparty":
            case t(
                "myrepresentations:capacity-options-arr-interested"
            ).toLowerCase(): {
                const Component =
                    appealType === 846040002
                        ? ConsultationInterestedPartyPerson
                        : RepInterestedPartyPerson;
                return (
                    <Component
                        {...commonProps}
                        interestedPersonRepresentationArr={buildRepsArr(
                            detailsObj
                        )}
                    />
                );
            }

            case "landowner": {
                return (
                    <RepLandOwner
                        {...commonProps}
                        landOwnerRepresentationArr={buildRepsArr(detailsObj)}
                    />
                );
            }

            default:
                return (
                    <RepCapacitySelection
                        {...commonProps}
                        capacityOptionsArr={capacityOptionsArr}
                        currentType={currentType}
                        casesObj={casesObj}
                        caseReference={caseReference}
                    />
                );
        }
    };

    const whichProgress = () => {
        const commonProps = {
            props,
            containerID: props.props.accountDetails.containerID,
            currentView,
            showQuestionnaireSection,
            setShowQuestionnaireSection,
            questionnaireCount,
        };

        const s78AppealTypes = [
            846040000, 846040001, 846040025, 846040004, 846040018, 846040003,
            846040009, 846040008, 846040017,
        ];

        const enforcementAppealTypes = [846040005, 846040006, 846040007];

        if (s78AppealTypes.includes(appealType)) {
            return <RepresentationProgress_s78 {...commonProps} />;
        }

        if (enforcementAppealTypes.includes(appealType)) {
            return <RepresentationProgress_enforcement {...commonProps} />;
        }

        return <></>;
    };

    const sortFileObj = (filelistObj) => {
        const cleanArray = (arr) =>
            arr
                .filter((obj) => obj !== null)
                .filter((obj) => Object.keys(obj).length > 0)
                .filter((obj) => obj.name !== undefined);

        const deduplicate = (arr) => {
            const seen = new Set();
            return arr.filter((obj) => {
                const serialized = JSON.stringify(obj);
                if (seen.has(serialized)) return false;
                seen.add(serialized);
                return true;
            });
        };

        const extractFilesFromField = (filesObj) => {
            return Object.values(filesObj).reduce((acc, file) => {
                if (file?.name) {
                    acc.push({ name: file.name, size: file.size });
                }
                return acc;
            }, []);
        };

        const cleanedBlobList = cleanArray(filelistObj);
        const extractedFiles = extractFilesFromField(field.input.value);
        const mergedFiles = [...extractedFiles, ...cleanedBlobList];

        return deduplicate(mergedFiles);
    };

    const updateRepresentation = async (
        values,
        sendSavedEmail,
        useSaveStatus
    ) => {
        const {
            appealType: appealTypeProp,
            currentView,
            accountDetails,
            loggedinUserEmail,
        } = props.props;
        const incidentID = props.appealType.caseReference.incidentid;
        const currentRef = caseReferenceObj.currentReference;
        const containerID = accountDetails.containerID;

        setSavingStatus(useSaveStatus);

        const getSiteAddress = () => {
            const {
                pinswg_siteaddressline1,
                pinswg_siteaddressline2,
                pinswg_siteaddresstown,
                pinswg_siteaddresspostcode,
            } = detailsObj;
            return [
                pinswg_siteaddressline1,
                pinswg_siteaddressline2,
                pinswg_siteaddresstown,
                pinswg_siteaddresspostcode,
            ]
                .filter(Boolean)
                .join(" ");
        };

        const getRepresentationCapacity = () => {
            if (
                router.query.hasOwnProperty("state") &&
                router.query.state === "edit"
            ) {
                return currentView.representationCapacity;
            }
            return isLPA ? "LPA" : values.representationCapacity;
        };

        const baseBody = {
            containerID,
            appealType: appealType || caseReferenceObj.repDetails.appealType,
            incidentID:
                caseReferenceObj.incidentid ||
                caseReferenceObj.repDetails.incidentid,
            caseRef: currentRef,
            casereference: currentRef,
            pinswg_questionnaireduedate: detailsObj.pinswg_questionnaireduedate,
            pinswg_statementduedate:
                detailsObj.pinswg_statementduedate ||
                detailsObj.pinswg_endofrepresentationperiod,
            pinswg_statementsduedate:
                detailsObj.pinswg_statementsduedate ||
                detailsObj.pinswg_endofrepresentationperiod,
            pinswg_finalcommentsduedate:
                detailsObj.pinswg_finalcommentsduedate ||
                detailsObj.pinswg_endofrepresentationperiod,
            pinswg_name: currentRef,
            firstname: accountDetails.firstname,
            lastname: accountDetails.lastname,
            emailAddress: accountDetails.emailaddress1,
            siteAddress: getSiteAddress(),
            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,
            representationCapacity: getRepresentationCapacity(),
            locale: router.locale,
        };

        const formattedValues = {
            ...values,
            ...baseBody,
            _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"
                ],
        };

        let updateBody = setRepFileName(formattedValues);

        // Clean and sanitize the body
        const sanitizedBody = Object.entries(updateBody).reduce(
            (acc, [key, val]) => {
                if (val !== null && val !== undefined && !key.startsWith("_")) {
                    acc[key] = val;
                }
                return acc;
            },
            {}
        );

        // Normalize "Yes"/"No" to booleans
        const stringified = JSON.stringify(sanitizedBody)
            .replace(/:"Yes"/g, ":true")
            .replace(/:"No"/g, ":false");
        updateBody = JSON.parse(stringified);

        const sendEmailIfNeeded = () => {
            if (sendSavedEmail) {
                const reference = "PEDW-PARTIAL-REP";
                const templateId = "021b0a7b-df00-41f1-b94e-c269bee98c75";
                const personalisation = {
                    caseReference: props.caseReference,
                    emailAddress: loggedinUserEmail,
                    returnLink: "",
                    linkExpiry: 600, // 10 minutes
                };
                sendEmail(
                    templateId,
                    loggedinUserEmail,
                    personalisation,
                    reference
                );
            }
        };

        const redirectToPortal = () => {
            const base =
                router.locale !== "en"
                    ? `/${router.locale}/fymhorth`
                    : "/myportal";
            router.replace(base);
        };

        const handleFileUpload = () => {
            const filesWithLinks = updateLinks({
                ...values,
                filesList: currentView.fileList,
            });
            uploadRepresentationFiles(filesWithLinks);
        };

        const isSubmitted = currentView.representationSubmit === "true";

        if (isSubmitted) {
            sendEmailIfNeeded();
            if (useSaveStatus) redirectToPortal();
        } else {
            handleFileUpload();
            if (useSaveStatus) {
                redirectToPortal();
            }
        }

        console.log("Rep Updated - ", props.caseReference);
    };

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

        // Determine case data source
        const getCaseDetailsSource = () => {
            if (router.query?.state === "edit") {
                return props.props.myRepresentations.myRepresentations;
            }
            return props.currentType === "watchedCases"
                ? props.props.watchedCases.watchedCasesDetails
                : props.props.searchResultsObj.searchDetailsObj;
        };

        const setCaseDetailsObj = getCaseDetailsSource();

        // Find correct case details
        let detailsObj = jsonpath({
            path: `$..[?(@ && @.pinswg_name=="${caseReference}")]`,
            json: setCaseDetailsObj,
            eval: true,
        })[0];

        // Cancel submit status if editing
        if (router.query?.state === "edit") {
            setRepresentationSubmit(false);
        }

        // If it's a new form and has values, enrich payload
        if (
            formObj?.representationForm?.values &&
            !router.query.hasOwnProperty("state")
        ) {
            const formValues = formObj.representationForm.values;

            const buildSiteAddress = () => {
                const {
                    pinswg_siteaddressline1,
                    pinswg_siteaddressline2,
                    pinswg_siteaddresstown,
                    pinswg_siteaddresspostcode,
                } = detailsObj;
                return [
                    pinswg_siteaddressline1,
                    pinswg_siteaddressline2,
                    pinswg_siteaddresstown,
                    pinswg_siteaddresspostcode,
                ]
                    .filter(Boolean)
                    .join(" ");
            };

            const representationCapacity =
                router.query?.state === "edit"
                    ? props.props.currentView.representationCapacity
                    : isLPA
                    ? "LPA"
                    : values.representationCapacity;

            Object.assign(values, {
                ...formValues,
                containerID: props.props.accountDetails.containerID,
                appealType:
                    appealType || caseReferenceObj.repDetails.appealType,
                incidentID:
                    caseReferenceObj.incidentid ||
                    caseReferenceObj.repDetails.incidentid,
                caseRef: caseReferenceObj.currentReference,
                casereference: caseReferenceObj.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: caseReferenceObj.currentReference,
                firstname: accountDetails.firstname,
                lastname: accountDetails.lastname,
                emailAddress: accountDetails.emailaddress1,
                siteAddress: buildSiteAddress(),
                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,
                locale: router.locale,
            });
        }

        const shouldSubmit = !currentView.representationSubmit;

        if (shouldSubmit) {
            const hasNoCapacity =
                !currentView.representationCapacity ||
                currentView.representationCapacity === "";

            const repType = values.representationType;

            if (hasNoCapacity) {
                const capacity = isLPA
                    ? "LPA"
                    : values.representationCapacity
                          .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
                          .toLowerCase();
                setRepresentationCapacity(capacity);
            } else {
                if (repType === "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 {
            // Already submitted
            console.log("capacity", currentView.representationCapacity);
            console.log("has errors:", props.invalid);

            Object.assign(values, {
                locale: router.locale,
                repComplete: currentView.caseReference.currentReference,
            });

            if (props.invalid === false) {
                updateRepresentation(values, false, false);
            }

            // Final PDF & upload
            setFinaliseAppealProcess(true);
            generateRepPDF(
                values,
                props.props.accountDetails.containerID,
                currentView.caseReference.currentReference
            ).then((data) => {
                if (data.status === "success") {
                    values = updateLinks(values);
                    uploadRepresentationFiles(values);
                    setRepresentationSubmit(true);
                    setRepresentationSubmitConfirmation(true);
                }
            });
        }
    };

    const cleanFilesList = (blobList) => {
        const cleanedFiles = (blobList.filesList || [])
            .filter((file) => file !== null)
            .filter(
                (file) =>
                    file &&
                    typeof file === "object" &&
                    Object.keys(file).length > 0
            )
            .filter((file) => file.name !== undefined);

        return {
            ...blobList,
            filesList: cleanedFiles,
        };
    };

    const uploadRepresentationFiles = (values) => {
        // Clean files list if present
        const cleanedValues = values.hasOwnProperty("filesList")
            ? cleanFilesList(values)
            : values;

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

        // Prepare data object for upload
        const dataObj = cleanedValues;

        // Update links on values
        const updatedValues = updateLinks(cleanedValues);

        // Perform file upload and return the promise
        return uploadRepFiles(
            dataObj,
            [{}],
            updatedValues.containerID,
            `${props.caseReference}/${dataObj.repfile_name}`
        );
    };

    const repForm = props.props.form;

    const isQuestionnaire =
        formObj?.representationForm?.values?.representationType ===
        "Questionnaire";

    const appealIsConsultation = appealType === 846040002;
    const appealIsLocalImpact =
        currentView.caseReference.appealType === 846040011 ||
        currentView.caseReference.appealType === 846040002;

    const renderDueDate = () => {
        if (
            detailsObj?.pinswg_questionnaireduedate ||
            detailsObj?.pinswg_endofrepresentationperiod ||
            detailsObj?.pinswg_consultationclose
        ) {
            return formatDates(
                detailsObj.pinswg_questionnaireduedate ||
                    detailsObj.pinswg_endofrepresentationperiod ||
                    detailsObj.pinswg_consultationclose
            );
        }
        return "N/A";
    };

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

    const renderMarineImpact = () =>
        appealIsConsultation &&
        isNRW && (
            <div className="govuk-body-s">
                {t("myrepresentations:marine-impact-report")}:{" "}
                <span className="govuk-body-s">
                    {formatDates(detailsObj.pinswg_consultationclose)}
                </span>
            </div>
        );

    const renderConsultationClose = () =>
        appealIsConsultation && (
            <div className="govuk-body-s">
                {t("myrepresentations:consultation-close-label")}:{" "}
                <span className="govuk-body-s">
                    {formatDates(detailsObj.pinswg_consultationclose)}
                </span>
            </div>
        );

    const renderFinalCommentsDue = () =>
        !(
            currentView.caseReference.appealType === 846040011 ||
            appealIsConsultation
        ) && (
            <div className="govuk-body-s">
                {t("myrepresentations:final-comments-due-label")}:{" "}
                <span className="govuk-body-s">
                    {formatDates(detailsObj.pinswg_finalcommentsduedate)}
                </span>
            </div>
        );

    return (
        <div>
            <form onSubmit={handleSubmit(onHandleSubmit)}>
                {currentView.representationSubmit ? (
                    <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">
                            {appealIsConsultation
                                ? t(
                                      "myrepresentations:make-a-consultation-on-label"
                                  )
                                : 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">
                                                {appealIsLocalImpact
                                                    ? t(
                                                          "myrepresentations:local-impact-report"
                                                      )
                                                    : t(
                                                          "myrepresentations:questionnaire-due-label"
                                                      )}
                                                :{" "}
                                                <span className="govuk-body-s">
                                                    {renderDueDate()}
                                                </span>
                                            </div>

                                            {!appealIsConsultation &&
                                                renderStatementsDue()}

                                            {renderMarineImpact()}

                                            {renderConsultationClose()}

                                            {renderFinalCommentsDue()}
                                        </div>
                                    </div>
                                </div>

                                {isQuestionnaire && whichProgress()}
                            </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)
);