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 {
    RenderPickList,
    RenderRadioList,
    RenderTextfield,
} from "./representationElements";

import ReactPDF, {
    Document,
    Page,
    Text,
    View,
    StyleSheet,
    PDFViewer,
} from "@react-pdf/renderer";
import { object } from "prop-types";

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,
    } = props;
    const formObj = props.props.form;
    let setCaseQueryObj = props[currentType] || {};
    var casesObj = {};

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

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

    var detailsObj = {};

    const capacityOptionsArr = ["Appellant", "Agent", "Interested Party"];

    const appellantApplicantRepresentationArr = [
        "Statement",
        "Final comments",
        "Written statement of evidence",
        "Other",
    ];

    const interestedPersonRepresentationArr = [
        "Statement",
        "Final comments",
        "Other",
    ];

    const lpaRepresentationArr = [
        "Questionnaire",
        "Final comments",
        "Written statement of evidence",
        "Other",
    ];

    const landOwnerRepresentationArr = [
        "Statement",
        "Final comments",
        "Written statement of evidence",
        "Other",
    ];

    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 isLPA =
        props.props.accountDetails.accountDetails[
            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
        ] == "LPA"
            ? true
            : false;

    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 "appellant":
                    //setRepresentationCapacity("appellant");
                    return (
                        <RepAppellant
                            formObj={formObj}
                            appellantApplicantRepresentationArr={
                                appellantApplicantRepresentationArr
                            }
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                            onHandleSubmit={onHandleSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                        />
                    );
                    break;
                case "lpa":
                    //setRepresentationCapacity("appellant");
                    return (
                        <RepLPA
                            formObj={formObj}
                            appellantApplicantRepresentationArr={
                                lpaRepresentationArr
                            }
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                            onHandleSubmit={onHandleSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                        />
                    );
                    break;
                case "agent":
                    //setRepresentationCapacity("agent");
                    return (
                        <RepAgent
                            formObj={formObj}
                            appellantApplicantRepresentationArr={
                                appellantApplicantRepresentationArr
                            }
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                            onHandleSubmit={onHandleSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                        />
                    );
                    break;
                case "interestedparty/person":
                    // setRepresentationCapacity("interestedpartyperson");
                    return (
                        <RepInterestedPartyPerson
                            formObj={formObj}
                            interestedPersonRepresentationArr={
                                interestedPersonRepresentationArr
                            }
                            setRepresentationCapacity={
                                setRepresentationCapacity
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                            onHandleSubmit={onHandleSubmit}
                            currentView={currentView}
                            setSubmitBack={setSubmitBack}
                            props={props}
                        />
                    );
                    break;
                case "landowner":
                    //setRepresentationCapacity("landowner");
                    return (
                        <RepLandOwner
                            formObj={formObj}
                            landOwnerRepresentationArr={
                                landOwnerRepresentationArr
                            }
                            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 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();

        const repType = "";
        switch (values.representationCapacity) {
            case "Appellant":
                repType = "APPELLANT";
                break;
            case "Agent":
                repType = "AGENT";
                break;
            case "Interested Party/Person":
                repType = "IP";
                break;
            case "Land Owner":
                repType = "LO";
                break;
            case "LPA":
                repType = "LPA";
                break;

            default:
            // code block
        }

        Object.assign(updateBody, {
            "pinswg_name":
                year +
                "-" +
                month +
                "-" +
                day +
                "-" +
                time +
                "-" +
                repType +
                "-REP" +
                "_" +
                props.props.accountDetails.accountDetails.lastname,
            "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 = props.props.searchResultsObj.searchDetailsObj;

        var detailsObj = {};

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

        detailsObj = detailsObj[0];

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

            return data;
        });
    };

    const repForm = props.props.form;

    console.log(
        "what is representationSubmit state: " +
            currentView.representationSubmit
    );

    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("email")}
                                >
                                    Sign in to raise representation
                                </button>
                            </>
                        ) : (
                            <>
                                <h1 className="govuk-heading-l">
                                    Make a representation on:{" "}
                                    {currentView.caseReference.currentReference}
                                </h1>
                                {whichControl()}
                            </>
                        )}
                    </>
                )}
            </form>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        currentView: state.currentView,
        //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,
    })(MakeRepresentation)
);