import { connect } from "react-redux";
import { Field, formValueSelector, reduxForm } from "redux-form";
import { RenderMultiline } from "./representationElements";

let RepLPAQuestionnaire = (props) => {
    return (
        <>
            <p className="govuk-body">
                {t("myrepresentations:enter-comment-label")}
            </p>
            <fieldset
                className="govuk-fieldset"
                aria-describedby="commentBox-hint"
            >
                {/* <div id="commentBox-hint" className="govuk-hint">
                    {t("myrepresentations:comments-set-out-label")}:
                </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) => {
    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)
);