import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { Field, reduxForm } from "redux-form";
import {
    RenderPickList,
    RenderTextfield,
    RenderRadioList,
    RenderMultiline,
} from "./representationElements";
import {
    setRepresentationCapacity,
    setRepresentationSubmit,
    setSubmitBack,
    setRepresentationSubmitConfirmation,
} from "../../../store/currentView/action";
import { useDropzone } from "react-dropzone";
import RepComplete from "./representationComplete";

const RepCompleteSubmit = (props) => {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const {
        formObj,
        appellantApplicantRepresentationArr,
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
        setSubmitBack,
        setRepresentationSubmitConfirmation,
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
    const files = acceptedFiles.map((file) => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ));

    return (
        <>
            {currentView.representationSubmitConfirmation == true ? (
                <RepComplete />
            ) : (
                <div id="rep-appellant">
                    <div className="govuk-grid-column-full">
                        <div className="govuk-grid-row govuk-body">
                            <h1 className="govuk-heading-m ">Submit</h1>
                            <p>
                                The gathering and subsequent processing of the
                                personal data supplied by you in this form, is
                                in accordance with the terms of our registration
                                under the Data Protection Act 2018.
                            </p>

                            <p>
                                The Planning Inspectorate takes its data
                                protection responsibilities for the information
                                you provide us with very seriously. To find out
                                more about how we use and manage your personal
                                data, please go to our privacy notice.
                            </p>

                            <p>
                                I confirm that all sections of this form have
                                been fully completed and that the details are
                                correct to the best of my knowledge.
                            </p>

                            <div className="govuk-form-group">
                                <label
                                    className="govuk-label govuk-body-m"
                                    htmlFor="representationType"
                                >
                                    I confirm I have read the above.
                                </label>
                                {/* <Field
                        name="representationType"
                        component={RenderPickList}
                        datafieldname="representationType"
                        optionsArr={appellantApplicantRepresentationArr}
                    /> */}
                            </div>
                        </div>
                        <div className="govuk-grid-row">
                            <div className="govuk-button-group">
                                <button
                                    type="submit"
                                    className="govuk-button"
                                    data-module="govuk-button"
                                    onClick={() =>
                                        setRepresentationSubmitConfirmation()
                                    }
                                >
                                    Continue
                                </button>
                                {/* <a
                        onClick={() => {
                            setRepresentationSubmit(false);
                        }}
                        className="govuk-button"
                    >
                        Continue
                    </a> */}

                                <a
                                    onClick={() => setSubmitBack()}
                                    className="govuk-link"
                                >
                                    Back
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default RepCompleteSubmit;