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

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

    const [clearRepForm, setClearRepForm] = useState(false);

    const router = useRouter();
    const { locale } = router;
    const {
        caseReference,
        myCases,
        myRepresentations,
        watchedCases,
        awaitingSubmission,
        searchResultsObj,
        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(/[\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}
                    />
                );
                break;
            case "appellant":
                //setRepresentationCapacity("appellant");
                return (
                    <RepAppellant
                        formObj={formObj}
                        appellantApplicantRepresentationArr={
                            appellantApplicantRepresentationArr
                        }
                        setRepresentationCapacity={setRepresentationCapacity}
                        setRepresentationSubmit={setRepresentationSubmit}
                        onHandleSubmit={onHandleSubmit}
                        currentView={currentView}
                        setSubmitBack={setSubmitBack}
                    />
                );
                break;
            case "agent":
                //setRepresentationCapacity("agent");
                return (
                    <RepAgent
                        formObj={formObj}
                        appellantApplicantRepresentationArr={
                            appellantApplicantRepresentationArr
                        }
                        setRepresentationCapacity={setRepresentationCapacity}
                        setRepresentationSubmit={setRepresentationSubmit}
                        onHandleSubmit={onHandleSubmit}
                        currentView={currentView}
                        setSubmitBack={setSubmitBack}
                    />
                );
                break;
            case "interestedpartyperson":
                // setRepresentationCapacity("interestedpartyperson");
                return (
                    <RepInterestedPartyPerson
                        formObj={formObj}
                        interestedPersonRepresentationArr={
                            interestedPersonRepresentationArr
                        }
                        setRepresentationCapacity={setRepresentationCapacity}
                        setRepresentationSubmit={setRepresentationSubmit}
                        onHandleSubmit={onHandleSubmit}
                        currentView={currentView}
                        setSubmitBack={setSubmitBack}
                    />
                );
                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}
                    />
                );
        }
    };

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

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

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

    const repForm = props.props.form;

    return (
        <div>
            {repForm["representationForm.submitSucceeded"] == true ? (
                <RepCompleteSubmit
                    formObj={formObj}
                    capacityOptionsArr={capacityOptionsArr}
                    currentType={currentType}
                    casesObj={casesObj}
                    setRepresentationCapacity={setRepresentationCapacity}
                    setRepresentationSubmit={setRepresentationSubmit}
                    currentView={currentView}
                    setSubmitBack={setSubmitBack}
                    setRepresentationSubmitConfirmation={
                        setRepresentationSubmitConfirmation
                    }
                />
            ) : (
                <form onSubmit={handleSubmit(onHandleSubmit)}>
                    {whichControl()}
                </form>
            )}

            {console.log("is submitted", currentView.representationSubmit)}
        </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(setRepresentationCapacity(representationCapacity));
            dispatch(reset("representationForm"));
        },
        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)
);