import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useDropzone } from "react-dropzone";
import RepLPADetails from "./representationLPADetails";

let RepLPACapacitySelection = (props) => {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const {
        formObj,
        capacityOptionsArr,
        currentType,
        casesObj,
        detailsObj,
        validate,
        handleSubmit,
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
    const files = acceptedFiles.map((file) => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ));

    const required = (value) => (value ? undefined : "Required");

    return (
        <>
            <RepLPADetails
                formObj={formObj}
                currentType={currentType}
                casesObj={casesObj}
                detailsObj={detailsObj}
                caseReference={props.props.caseReference}
                ticketnumber={props.props.ticketnumber}
                searchResultsObj={props.props.searchResultsObj}
                props={props.props}
            />{" "}
            <div id="rep-details" className="vo_hiddens">
                <div className="govuk-grid-column-three-quarters">
                    <div className="govuk-grid-row">
                        {/* <h2 className="govuk-heading-m ">
                            Your details - {props.firstValue}
                        </h2> */}

                        {/* <div className="">
                            <label className="govuk-visually-hidden2">
                                <Field
                                    name="representationCapacity"
                                    datafieldname="representationCapacity"
                                    label={t("myrepresentations:capacity-select-what-capacity-label")}
                                    options={["LPA"]}
                                    id="representationCapacity"
                                    //className="govuk-radios__input "
                                    errorMsg={t(
                                        "myrepresentations:select-an-option-label"
                                    )}
                                    component="input"
                                    validate={[required]}
                                    value="LPA"
                                    checked={"true"}
                                    type="radio"
                                />
                                LPA
                            </label>
                        </div> */}
                    </div>
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <div className="govuk-button-group">
                            <button
                                type="submit"
                                className="govuk-button"
                                data-module="govuk-button"
                            >
                                {t("common:continue-button")}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default RepLPACapacitySelection;