import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { connect } from "react-redux";
import { Field, reduxForm, formValueSelector } from "redux-form";
import {
    RenderPickList,
    RenderTextfield,
    RenderRadioList,
    RenderMultiline,
    RenderCondtionalRadioList,
    RenderLPACondtionalRadioList,
    FileUploadField,
    RenderRichMultiline,
    RenderDatePicker,
} from "./representationElements";

let RepLPAQuestionnaire = (props) => {
    return (
        <>
            <p className="govuk-body">
                You can enter your comments in the space provided or attach a
                separate document.
            </p>
            <fieldset
                className="govuk-fieldset"
                aria-describedby="commentBox-hint"
            >
                <div id="commentBox-hint" className="govuk-hint">
                    My comments are set out in: vcc
                </div>
                <div className="govuk-form-group">
                    <Field
                        name="representationComments"
                        id="representationComments"
                        component={RenderMultiline}
                        type="text"
                        rows="5"
                        className="govuk-textarea govuk-input--width-30"
                        aria-describedby={props.name + "-hint"}
                    />
                </div>
            </fieldset>
        </>
    );
};

const selector = formValueSelector("representationForm"); // <-- same as form name

RepLPAQuestionnaire = connect((state) => {
    const representationTypeValue = selector(state, "representationType");
    const procedureTypeValue = selector(state, "procedureType");

    return {
        procedureTypeValue,
        representationTypeValue,
    };
})(RepLPAQuestionnaire);

const mapStateToProps = (state, props) => {
    console.log();
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        currentView: state.currentView,
        myRepresentations: state.myRepresentations,
        initialValues: state.currentView.caseReference.repDetails,
    };
};

export default connect(mapStateToProps)(
    reduxForm({
        form: "representationForm",
        enableReinitialize: true,
        destroyOnUnmount: false,
    })(RepLPAQuestionnaire)
);