import Link from "next/link";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import _ 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,
} from "../../../store/currentView/action";
import RepCapacitySelection from "./representationCapacitySelection";
import RepDetails from "./representationDetails";
import RepAppellant from "./representationAppellant";
import RepAgent from "./representationAgent";
import RepInterestedPartyPerson from "./representationInterestedPartyPerson";
import RepLandOwner from "./representationLandowner";
import RepCompleteSubmit from "./representationCompleteSubmit";
import { useSession, signIn, signOut } from "next-auth/react";

import {
    RenderPickList,
    RenderRadioList,
    RenderTextfield,
} from "./representationElements";

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,
    } = 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);

    const capacityOptionsArr = [
        "Appellant",
        "Agent",
        "Interested Party/Person",
        "Land Owner",
    ];

    const appellantApplicantRepresentationArr = [
        "Other",
        "Statement",
        "Statement of common ground",
        "Written statement of evidence",
    ];

    const interestedPersonRepresentationArr = [
        "Interested Party/Person correspondence",
    ];

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

    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 = () => {
        switch (currentView.representationCapacity) {
            case false:
                return (
                    <RepCapacitySelection
                        formObj={formObj}
                        capacityOptionsArr={capacityOptionsArr}
                        currentType={currentType}
                        casesObj={casesObj}
                        setRepresentationCapacity={setRepresentationCapacity}
                        setRepresentationSubmit={setRepresentationSubmit}
                        onHandleSubmit={onHandleSubmit}
                        currentView={currentView}
                        setSubmitBack={setSubmitBack}
                        props={props}
                    />
                );
                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 "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}
                    />
                );
                break;
            default:
                return (
                    <RepCapacitySelection
                        formObj={formObj}
                        capacityOptionsArr={capacityOptionsArr}
                        currentType={currentType}
                        casesObj={casesObj}
                        setRepresentationCapacity={setRepresentationCapacity}
                        setRepresentationSubmit={setRepresentationSubmit}
                        currentView={currentView}
                        setSubmitBack={setSubmitBack}
                        props={props}
                    />
                );
        }
    };

    const onHandleSubmit = (values) => {
        // console.log(
        //     values,
        //     values.representationCapacity,
        //     currentView.representationCapacity
        // );

        // console.log(_.isEmpty(currentView.representationCapacity));
        // console.log(
        //     values.representationCapacity
        //         .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
        //         .toLowerCase() == currentView.representationCapacity
        // );

        _.isEmpty(currentView.representationCapacity)
            ? setRepresentationCapacity(
                  values.representationCapacity
                      .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
                      .toLowerCase()
              )
            : setRepresentationSubmit("true");

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

    const repForm = props.props.form;

    // console.log(
    //     "waht is representationSubmit:",
    //     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}
                        setRepresentationSubmitConfirmation={
                            setRepresentationSubmitConfirmation
                        }
                    />
                ) : (
                    <>
                        {!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));
        },
    };
};

const selector = formValueSelector("representationForm");

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