import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useDropzone } from "react-dropzone";
import { Field } from "redux-form";
import RepDetails from "./representationDetails";
import { RenderRadioListWithText } from "./representationElements";

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

    const router = useRouter();
    const { locale } = router;
    const {
        formObj,
        capacityOptionsArr,
        currentType,
        casesObj,
        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 (
        <>
            <RepDetails
                formObj={formObj}
                currentType={currentType}
                casesObj={casesObj}
                caseReference={props.props.caseReference}
                searchResultsObj={props.props.searchResultsObj}
                myRepresentations={props.props.myRepresentations}
                props={props}
            />{" "}
            <div id="rep-details" className="">
                <div className="govuk-grid-column-full">
                    <div className="govuk-grid-row">
                        <h2 className="govuk-heading-m ">
                            {t(
                                "myrepresentations:capacity-select-your-details"
                            )}{" "}
                            - {props.firstValue}
                        </h2>
                        <Field
                            name="representationCapacity"
                            datafieldname="representationCapacity"
                            label={t(
                                "myrepresentations:capacity-select-what-capacity-label"
                            )}
                            options={capacityOptionsArr}
                            id="representationCapacity"
                            className="govuk-radios__input"
                            errorMsg={t(
                                "myrepresentations:select-an-option-label"
                            )}
                            component={RenderRadioListWithText}
                            validate={[required]}
                        />
                    </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 RepCapacitySelection;