import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useDropzone } from "react-dropzone";
import { Field } from "redux-form";
import {
    FileUploadField,
    RenderPickList,
    RenderRichMultiline,
} from "./representationElements";

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

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

    return (
        <div id="landowner">
            <div className="govuk-grid-column-full">
                <div className="govuk-grid-row">
                    <h2 className="govuk-heading-m ">
                        Representation for a Land owner
                    </h2>

                    <div className="govuk-form-group">
                        <label
                            className="govuk-label govuk-body-m"
                            htmlFor="representationType"
                        >
                            {t(
                                "myrepresentations:representation-from-an-agent-heading"
                            )}
                            ?
                        </label>
                        <Field
                            name="representationType"
                            component={RenderPickList}
                            datafieldname="representationType"
                            optionsArr={landOwnerRepresentationArr}
                        />
                    </div>
                </div>

                <div className="govuk-grid-row">
                    <div className="govuk-form-group">
                        <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={RenderRichMultiline}
                                    type="text"
                                    rows="5"
                                    className="govuk-textarea govuk-input--width-30"
                                    aria-describedby={props.name + "-hint"}
                                />
                            </div>

                            <div className="govuk-form-group govuk-!-margin-bottom-9">
                                <FileUploadField
                                    name={"representationDocuments"}
                                    id={"representationDocuments"}
                                    label={t(
                                        "myrepresentations:add-files-label"
                                    )}
                                    ticketnumber={
                                        props.currentView.caseReference
                                            .ticketnumber
                                    }
                                    hint={"sdsd"}
                                    fileList={[]}
                                    setFilesForRepresentation={[]}
                                    containerID={
                                        props.props.props.accountDetails
                                            .containerID
                                    }
                                />
                            </div>
                        </fieldset>
                    </div>{" "}
                </div>
                {typeof formObj.representationForm.values.representationType !=
                    "undefined" && (
                    <div className="govuk-grid-row">
                        <div className="govuk-button-group">
                            <button
                                type="submit"
                                className="govuk-button"
                                data-module="govuk-button"
                            >
                                {t("common:continue-button")}
                            </button>
                            {router.query.state != "edit" && (
                                <a
                                    onClick={() => {
                                        setRepresentationCapacity();
                                    }}
                                    className="govuk-link"
                                >
                                    {t("common:back-link")}
                                </a>
                            )}
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};

export default RepLandOwner;