import Link from "next/link";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath, { value } from "jsonpath";
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,
} 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 { 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 isLPA =
        props.props.accountDetails.accountDetails[
            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
        ] == "LPA"
            ? true
            : false;

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

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

    var detailsObj = {};

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

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

    var detailsObj = {};

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

    detailsObj = detailsObj[0];

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

        let todaysDate = new Date();

        let startDate = new Date(detailsObj.pinswg_startdate);
        let questionnaireDate = new Date(
            detailsObj.pinswg_questionnaireduedate
        );
        let finalCommentsDate = new Date(
            detailsObj.pinswg_finalcommentsduedate
        );
        let statementDueDate = new Date(detailsObj.pinswg_statementduedate);

        isLPA &&
            todaysDate >= startDate &&
            todaysDate <= questionnaireDate &&
            buildArr.push("Questionnaire");

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

        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 = () => {
        // console.log(isLPA);
        // console.log(
        //     currentView.representationCapacity,
        //     _.isEmpty(currentView.representationCapacity)
        // );

        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}
                />
            );
        } 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}
                    />;
                    break;
                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}
                        />
                    );
                    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}
                        />
                    );
                    break;
                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}
                        />
                    );
                    break;
                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}
                        />
                    );
                    break;
                case "landowner":
                    //setRepresentationCapacity("landowner");
                    return (
                        <RepLandOwner
                            formObj={formObj}
                            landOwnerRepresentationArr={buildRepsArr(
                                detailsObj
                            )}
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            onHandleSubmit={onHandleSubmit}
                            setRepresentationSubmit={setRepresentationSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                        />
                    );
                    break;
                default:
                    return (
                        <RepCapacitySelection
                            formObj={formObj}
                            capacityOptionsArr={capacityOptionsArr}
                            currentType={currentType}
                            casesObj={casesObj}
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                        />
                    );
            }
        }
    };

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

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

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

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

        const repDate = new Date();

        let day = repDate.getDate();
        let month = repDate.getMonth() + 1;
        let year = repDate.getFullYear();
        let time = repDate.getTime();

        let repType = "";
        switch (values.representationCapacity) {
            case t("myrepresentations:capacity-options-arr-appellant"):
                repType = "APPELLANT";
                break;
            case t("myrepresentations:capacity-options-arr-agent"):
                repType = "AGENT";
                break;
            case t("myrepresentations:capacity-options-arr-interested"):
                repType = "IP";
                break;
            case "Land Owner":
                repType = "LO";
                break;
            case "lpa":
                repType = "LPA";
                break;

            default:
            // code block
        }

        Object.assign(updateBody, {
            "repfile_name": updateBody.hasOwnProperty("repfile_name")
                ? updateBody.repfile_name
                : year +
                  "-" +
                  month +
                  "-" +
                  day +
                  "-" +
                  time +
                  "-" +
                  repType +
                  "-REP" +
                  "_" +
                  props.props.accountDetails.accountDetails.lastname,
            "pinswg_name":
                props.props.currentView.caseReference.currentReference,
            "containerID": props.props.accountDetails.containerID,
            "appealType": props.props.currentView.caseReference.appealType,
            "incidentID": props.props.currentView.caseReference.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];
            }
        });

        //console.log(updateBody);

        //window.alert(`form is :\n\n${JSON.stringify(updateBody, null, 2)}`);

        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"
                ));
    };

    const onHandleSubmit = (values) => {
        console.log("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.props.searchResultsObj.searchDetailsObj;

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

        var detailsObj = {};

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

        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,
                "incidentID": props.props.currentView.caseReference.incidentid,
                "caseRef":
                    props.props.currentView.caseReference.currentReference,
                "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": locale,
            }));
        console.log(values);
        currentView.representationSubmit != true
            ? _.isEmpty(currentView.representationCapacity)
                ? isLPA
                    ? setRepresentationCapacity("lpa")
                    : setRepresentationCapacity(
                          values.representationCapacity
                              .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
                              .toLowerCase()
                      )
                : setRepresentationSubmit(true)
            : currentView.representationSubmit == true
            ? (console.log("capacity", currentView.representationCapacity),
              console.log("has errors:", props.invalid),
              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 })),
              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(fileListObj);

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

        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) => {
            //console.log("hello", data);

            return data;
        });
    };

    const repForm = props.props.form;

    try {
        let value = props.initialValues;
        //console.log("has props"), value;
        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>
                                <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">
                                                <h4 className="govuk-heading-s">
                                                    {t(
                                                        "myrepresentations:timetable-title"
                                                    )}
                                                </h4>
                                                <div className="govuk-summary-list">
                                                    <div className="govuk-body-s">
                                                        {t(
                                                            "myrepresentations:questionnaire-due-label"
                                                        )}
                                                        :
                                                        <span className="govuk-body-s">
                                                            {" "}
                                                            {formatDates(
                                                                detailsObj.pinswg_questionnaireduedate
                                                            )}
                                                        </span>
                                                    </div>
                                                    <div className="govuk-body-s">
                                                        {t(
                                                            "myrepresentations:statements-due-label"
                                                        )}
                                                        :
                                                        <span className="govuk-body-s">
                                                            {" "}
                                                            {formatDates(
                                                                detailsObj.pinswg_statementduedate
                                                            )}
                                                        </span>
                                                    </div>
                                                    <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>
                                        {
                                            formObj.hasOwnProperty(
                                                "representationForm"
                                            ) &&
                                                formObj[
                                                    "representationForm"
                                                ].hasOwnProperty("values") &&
                                                formObj[
                                                    "representationForm"
                                                ].values.hasOwnProperty(
                                                    "representationType"
                                                ) &&
                                                formObj["representationForm"]
                                                    .values
                                                    .representationType ==
                                                    "Questionnaire" &&
                                                whichProgress()
                                            // <nav
                                            //     role="navigation"
                                            //     aria-labelledby="progress-list"
                                            //     className="at-nav"
                                            // >
                                            //     <div
                                            //         id="step-by-step-navigation"
                                            //         data-module="gemstepnav"
                                            //         className="app-step-nav  app-step-nav--active"
                                            //         data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
                                            //         data-show-text="show"
                                            //         data-hide-text="hide"
                                            //         data-show-all-text="Show all"
                                            //         data-hide-all-text="Hide all"
                                            //     >
                                            //         <ol className="app-step-nav__steps">
                                            //             <li
                                            //                 className={
                                            //                     "app-step-nav__step js-step app-step-nav__step--active" +
                                            //                     (showQuestionnaireSection >=
                                            //                     1
                                            //                         ? " sectionComplete"
                                            //                         : " sectionIncomplete")
                                            //                 }
                                            //                 aria-current="step"
                                            //                 data-show=""
                                            //                 id="check-youre-allowed-to-drive"
                                            //             >
                                            //                 <div
                                            //                     className="app-step-nav__header js-toggle-panel "
                                            //                     data-position="1"
                                            //                 >
                                            //                     <h3 className="app-step-nav__title ">
                                            //                         <span className="app-step-nav__circle app-step-nav__circle--number">
                                            //                             <span className="app-step-nav__circle-inner">
                                            //                                 <span className="app-step-nav__circle-background">
                                            //                                     <span className="app-step-nav__circle-step-label govuk-visually-hidden">
                                            //                                         Step
                                            //                                     </span>{" "}
                                            //                                     1
                                            //                                     <span
                                            //                                         className="app-step-nav__circle-step-colon govuk-visually-hidden"
                                            //                                         aria-hidden="true"
                                            //                                     >
                                            //                                         :
                                            //                                     </span>
                                            //                                 </span>
                                            //                             </span>
                                            //                         </span>

                                            //                         <span className="js-step-title">
                                            //                             <a
                                            //                                 href="#"
                                            //                                 onClick={() => {
                                            //                                     setShowQuestionnaireSection(
                                            //                                         1
                                            //                                     );
                                            //                                 }}
                                            //                                 className="app-step-nav__button app-step-nav__button--title js-step-title-button"
                                            //                                 aria-expanded="false"
                                            //                                 aria-controls="step-panel-check-youre-allowed-to-drive-1"
                                            //                             >
                                            //                                 <span className="js-step-title-text govuk-!-font-size-16">
                                            //                                     {t(
                                            //                                         "myrepresentations:s78-section-heading-one"
                                            //                                     )}
                                            //                                     aaa
                                            //                                 </span>
                                            //                             </a>
                                            //                         </span>
                                            //                     </h3>
                                            //                 </div>
                                            //             </li>
                                            //             <li
                                            //                 className={
                                            //                     "app-step-nav__step js-step app-step-nav__step--active" +
                                            //                     (showQuestionnaireSection >=
                                            //                     2
                                            //                         ? " sectionComplete"
                                            //                         : " sectionIncomplete")
                                            //                 }
                                            //                 aria-current="step"
                                            //                 data-show=""
                                            //                 id="check-youre-allowed-to-drive"
                                            //             >
                                            //                 <div
                                            //                     className="app-step-nav__header js-toggle-panel "
                                            //                     data-position="1"
                                            //                 >
                                            //                     <h3 className="app-step-nav__title ">
                                            //                         <span className="app-step-nav__circle app-step-nav__circle--number">
                                            //                             <span className="app-step-nav__circle-inner">
                                            //                                 <span className="app-step-nav__circle-background">
                                            //                                     <span className="app-step-nav__circle-step-label govuk-visually-hidden">
                                            //                                         Step
                                            //                                     </span>{" "}
                                            //                                     2
                                            //                                     <span
                                            //                                         className="app-step-nav__circle-step-colon govuk-visually-hidden"
                                            //                                         aria-hidden="true"
                                            //                                     >
                                            //                                         :
                                            //                                     </span>
                                            //                                 </span>
                                            //                             </span>
                                            //                         </span>

                                            //                         <span className="js-step-title">
                                            //                             <a
                                            //                                 href="#"
                                            //                                 onClick={() => {
                                            //                                     setShowQuestionnaireSection(
                                            //                                         2
                                            //                                     );
                                            //                                 }}
                                            //                                 className="app-step-nav__button app-step-nav__button--title js-step-title-button"
                                            //                                 aria-expanded="false"
                                            //                                 aria-controls="step-panel-check-youre-allowed-to-drive-1"
                                            //                             >
                                            //                                 <span className="js-step-title-text govuk-!-font-size-16">
                                            //                                     {t(
                                            //                                         "myrepresentations:s78-section-heading-two"
                                            //                                     )}
                                            //                                 </span>
                                            //                             </a>
                                            //                         </span>
                                            //                     </h3>
                                            //                 </div>
                                            //             </li>
                                            //             <li
                                            //                 className={
                                            //                     "app-step-nav__step js-step app-step-nav__step--active" +
                                            //                     (showQuestionnaireSection >=
                                            //                     3
                                            //                         ? " sectionComplete"
                                            //                         : " sectionIncomplete")
                                            //                 }
                                            //                 aria-current="step"
                                            //                 data-show=""
                                            //                 id="check-youre-allowed-to-drive"
                                            //             >
                                            //                 <div
                                            //                     className="app-step-nav__header js-toggle-panel "
                                            //                     data-position="1"
                                            //                 >
                                            //                     <h3 className="app-step-nav__title ">
                                            //                         <span className="app-step-nav__circle app-step-nav__circle--number">
                                            //                             <span className="app-step-nav__circle-inner">
                                            //                                 <span className="app-step-nav__circle-background">
                                            //                                     <span className="app-step-nav__circle-step-label govuk-visually-hidden">
                                            //                                         Step
                                            //                                     </span>{" "}
                                            //                                     3
                                            //                                     <span
                                            //                                         className="app-step-nav__circle-step-colon govuk-visually-hidden"
                                            //                                         aria-hidden="true"
                                            //                                     >
                                            //                                         :
                                            //                                     </span>
                                            //                                 </span>
                                            //                             </span>
                                            //                         </span>

                                            //                         <span className="js-step-title">
                                            //                             <a
                                            //                                 href="#"
                                            //                                 onClick={() => {
                                            //                                     setShowQuestionnaireSection(
                                            //                                         3
                                            //                                     );
                                            //                                 }}
                                            //                                 className="app-step-nav__button app-step-nav__button--title js-step-title-button"
                                            //                                 aria-expanded="false"
                                            //                                 aria-controls="step-panel-check-youre-allowed-to-drive-1"
                                            //                             >
                                            //                                 <span className="js-step-title-text govuk-!-font-size-16">
                                            //                                     {t(
                                            //                                         "myrepresentations:s78-section-heading-three"
                                            //                                     )}
                                            //                                 </span>
                                            //                             </a>
                                            //                         </span>
                                            //                     </h3>
                                            //                 </div>
                                            //             </li>
                                            //             <li
                                            //                 className={
                                            //                     "app-step-nav__step js-step app-step-nav__step--active" +
                                            //                     (showQuestionnaireSection >=
                                            //                     4
                                            //                         ? " sectionComplete"
                                            //                         : " sectionIncomplete")
                                            //                 }
                                            //                 aria-current="step"
                                            //                 data-show=""
                                            //                 id="check-youre-allowed-to-drive"
                                            //             >
                                            //                 <div
                                            //                     className="app-step-nav__header js-toggle-panel "
                                            //                     data-position="1"
                                            //                 >
                                            //                     <h3 className="app-step-nav__title ">
                                            //                         <span className="app-step-nav__circle app-step-nav__circle--number">
                                            //                             <span className="app-step-nav__circle-inner">
                                            //                                 <span className="app-step-nav__circle-background">
                                            //                                     <span className="app-step-nav__circle-step-label govuk-visually-hidden">
                                            //                                         Step
                                            //                                     </span>{" "}
                                            //                                     4
                                            //                                     <span
                                            //                                         className="app-step-nav__circle-step-colon govuk-visually-hidden"
                                            //                                         aria-hidden="true"
                                            //                                     >
                                            //                                         :
                                            //                                     </span>
                                            //                                 </span>
                                            //                             </span>
                                            //                         </span>

                                            //                         <span className="js-step-title">
                                            //                             <a
                                            //                                 href="#"
                                            //                                 onClick={() => {
                                            //                                     setShowQuestionnaireSection(
                                            //                                         4
                                            //                                     );
                                            //                                 }}
                                            //                                 className="app-step-nav__button app-step-nav__button--title js-step-title-button"
                                            //                                 aria-expanded="false"
                                            //                                 aria-controls="step-panel-check-youre-allowed-to-drive-1"
                                            //                             >
                                            //                                 <span className="js-step-title-text govuk-!-font-size-16">
                                            //                                     {t(
                                            //                                         "myrepresentations:s78-section-heading-four"
                                            //                                     )}
                                            //                                 </span>
                                            //                             </a>
                                            //                         </span>
                                            //                     </h3>
                                            //                 </div>
                                            //             </li>
                                            //             <li
                                            //                 className={
                                            //                     "app-step-nav__step js-step app-step-nav__step--active" +
                                            //                     (showQuestionnaireSection >=
                                            //                     5
                                            //                         ? " sectionComplete"
                                            //                         : " sectionIncomplete")
                                            //                 }
                                            //                 aria-current="step"
                                            //                 data-show=""
                                            //                 id="check-youre-allowed-to-drive"
                                            //             >
                                            //                 <div
                                            //                     className="app-step-nav__header js-toggle-panel "
                                            //                     data-position="1"
                                            //                 >
                                            //                     <h3 className="app-step-nav__title ">
                                            //                         <span className="app-step-nav__circle app-step-nav__circle--number">
                                            //                             <span className="app-step-nav__circle-inner">
                                            //                                 <span className="app-step-nav__circle-background">
                                            //                                     <span className="app-step-nav__circle-step-label govuk-visually-hidden">
                                            //                                         Step
                                            //                                     </span>{" "}
                                            //                                     5
                                            //                                     <span
                                            //                                         className="app-step-nav__circle-step-colon govuk-visually-hidden"
                                            //                                         aria-hidden="true"
                                            //                                     >
                                            //                                         :
                                            //                                     </span>
                                            //                                 </span>
                                            //                             </span>
                                            //                         </span>

                                            //                         <span className="js-step-title">
                                            //                             <a
                                            //                                 href="#"
                                            //                                 onClick={() => {
                                            //                                     setShowQuestionnaireSection(
                                            //                                         5
                                            //                                     );
                                            //                                 }}
                                            //                                 className="app-step-nav__button app-step-nav__button--title js-step-title-button"
                                            //                                 aria-expanded="false"
                                            //                                 aria-controls="step-panel-check-youre-allowed-to-drive-1"
                                            //                             >
                                            //                                 <span className="js-step-title-text govuk-!-font-size-16">
                                            //                                     {t(
                                            //                                         "myrepresentations:s78-section-heading-five"
                                            //                                     )}
                                            //                                 </span>
                                            //                             </a>
                                            //                         </span>
                                            //                     </h3>
                                            //                 </div>
                                            //             </li>{" "}
                                            //             <li
                                            //                 className={
                                            //                     "app-step-nav__step js-step app-step-nav__step--active" +
                                            //                     (showQuestionnaireSection >=
                                            //                     6
                                            //                         ? " sectionComplete"
                                            //                         : " sectionIncomplete")
                                            //                 }
                                            //                 aria-current="step"
                                            //                 data-show=""
                                            //                 id="check-youre-allowed-to-drive"
                                            //             >
                                            //                 <div
                                            //                     className="app-step-nav__header js-toggle-panel "
                                            //                     data-position="1"
                                            //                 >
                                            //                     <h3 className="app-step-nav__title ">
                                            //                         <span className="app-step-nav__circle app-step-nav__circle--number">
                                            //                             <span className="app-step-nav__circle-inner">
                                            //                                 <span className="app-step-nav__circle-background">
                                            //                                     <span className="app-step-nav__circle-step-label govuk-visually-hidden">
                                            //                                         Step
                                            //                                     </span>{" "}
                                            //                                     6
                                            //                                     <span
                                            //                                         className="app-step-nav__circle-step-colon govuk-visually-hidden"
                                            //                                         aria-hidden="true"
                                            //                                     >
                                            //                                         :
                                            //                                     </span>
                                            //                                 </span>
                                            //                             </span>
                                            //                         </span>

                                            //                         <span className="js-step-title">
                                            //                             <a
                                            //                                 href="#"
                                            //                                 onClick={() => {
                                            //                                     setShowQuestionnaireSection(
                                            //                                         6
                                            //                                     );
                                            //                                 }}
                                            //                                 className="app-step-nav__button app-step-nav__button--title js-step-title-button"
                                            //                                 aria-expanded="false"
                                            //                                 aria-controls="step-panel-check-youre-allowed-to-drive-1"
                                            //                             >
                                            //                                 <span className="js-step-title-text govuk-!-font-size-16">
                                            //                                     {t(
                                            //                                         "myrepresentations:add-files-label"
                                            //                                     )}
                                            //                                 </span>
                                            //                             </a>
                                            //                         </span>
                                            //                     </h3>
                                            //                 </div>
                                            //             </li>
                                            //             <li
                                            //                 className={
                                            //                     "app-step-nav__step js-step app-step-nav__step--active" +
                                            //                     (showQuestionnaireSection >=
                                            //                     7
                                            //                         ? " sectionComplete"
                                            //                         : " sectionIncomplete")
                                            //                 }
                                            //                 aria-current="step"
                                            //                 data-show=""
                                            //                 id="check-youre-allowed-to-drive"
                                            //             >
                                            //                 <div
                                            //                     className="app-step-nav__header js-toggle-panel "
                                            //                     data-position="1"
                                            //                 >
                                            //                     <h3 className="app-step-nav__title ">
                                            //                         <span className="app-step-nav__circle app-step-nav__circle--number">
                                            //                             <span className="app-step-nav__circle-inner">
                                            //                                 <span className="app-step-nav__circle-background">
                                            //                                     <span className="app-step-nav__circle-step-label govuk-visually-hidden">
                                            //                                         Step
                                            //                                     </span>{" "}
                                            //                                     7
                                            //                                     <span
                                            //                                         className="app-step-nav__circle-step-colon govuk-visually-hidden"
                                            //                                         aria-hidden="true"
                                            //                                     >
                                            //                                         :
                                            //                                     </span>
                                            //                                 </span>
                                            //                             </span>
                                            //                         </span>

                                            //                         <span className="js-step-title">
                                            //                             <a
                                            //                                 href="#"
                                            //                                 onClick={() => {
                                            //                                     setShowQuestionnaireSection(
                                            //                                         7
                                            //                                     );
                                            //                                 }}
                                            //                                 className="app-step-nav__button app-step-nav__button--title js-step-title-button"
                                            //                                 aria-expanded="false"
                                            //                                 aria-controls="step-panel-check-youre-allowed-to-drive-1"
                                            //                             >
                                            //                                 <span className="js-step-title-text govuk-!-font-size-16">
                                            //                                     {t(
                                            //                                         "myrepresentations:s78-section-heading-seven"
                                            //                                     )}
                                            //                                 </span>
                                            //                             </a>
                                            //                         </span>
                                            //                     </h3>
                                            //                 </div>
                                            //             </li>
                                            //         </ol>
                                            //     </div>
                                            // </nav>
                                        }
                                    </div>
                                </div>
                            </>
                        )}
                    </>
                )}
            </form>
        </div>
    );
};

const mapStateToProps = (state) => {
    //console.log("\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \n in map state", 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)
);