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 } from "redux-form";
import { connect } from "react-redux";
import { useDropzone } from "react-dropzone";

import { setRepresentationCapacity } 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 {
    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,
    } = 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 = () => {
        currentView.representationCapacity == false
            ? false
            : _.isEmpty(formObj["representationForm"])
            ? false
            : _.isEmpty(formObj["representationForm"].values)
            ? false
            : _.isEmpty(
                  formObj["representationForm"].values.representationCapacity
              )
            ? setRepresentationCapacity(false)
            : setRepresentationCapacity(
                  formObj["representationForm"].values.representationCapacity
                      .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
                      .toLowerCase()
              );

        return currentView.representationCapacity;
    };

    const whichControl = () => {
        repCapacityType();
        switch (currentView.representationCapacity) {
            case false:
                return (
                    <RepCapacitySelection
                        formObj={formObj}
                        capacityOptionsArr={capacityOptionsArr}
                        currentType={currentType}
                        casesObj={casesObj}
                        setRepresentationCapacity={setRepresentationCapacity}
                    />
                );
                break;
            case "appellant":
                setRepresentationCapacity("appellant");
                return (
                    <RepAppellant
                        formObj={formObj}
                        appellantApplicantRepresentationArr={
                            appellantApplicantRepresentationArr
                        }
                        setRepresentationCapacity={setRepresentationCapacity}
                    />
                );
                break;
            case "agent":
                setRepresentationCapacity("agent");
                return (
                    <RepAgent
                        formObj={formObj}
                        appellantApplicantRepresentationArr={
                            appellantApplicantRepresentationArr
                        }
                        setRepresentationCapacity={setRepresentationCapacity}
                    />
                );
                break;
            case "interestedpartyperson":
                setRepresentationCapacity("interestedpartyperson");
                return (
                    <RepInterestedPartyPerson
                        formObj={formObj}
                        interestedPersonRepresentationArr={
                            interestedPersonRepresentationArr
                        }
                        setRepresentationCapacity={setRepresentationCapacity}
                    />
                );
                break;
            case "landowner":
                setRepresentationCapacity("landowner");
                return (
                    <RepLandOwner
                        formObj={formObj}
                        landOwnerRepresentationArr={landOwnerRepresentationArr}
                        setRepresentationCapacity={setRepresentationCapacity}
                    />
                );
                break;
            default:
                return (
                    <RepCapacitySelection
                        formObj={formObj}
                        capacityOptionsArr={capacityOptionsArr}
                        currentType={currentType}
                        casesObj={casesObj}
                        setRepresentationCapacity={setRepresentationCapacity}
                    />
                );
        }
    };

    return (
        <div>
            {whichControl()} - {props.firstValue}
        </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));
        },
    };
};

const selector = formValueSelector("representationForm");

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