import Link from "next/link";
import { connect } from "react-redux";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { Field, reduxForm } from "redux-form";
import {
    RenderPickList,
    RenderTextfield,
    RenderRadioList,
    RenderMultiline,
    RenderRichMultiline,
    RenderCondtionalRadioList,
    FileUploadField,
} from "./representationElements";
import {
    getFormCollectionByID,
    getThumbnailIconByExtension,
    bytesToSize,
} from "../../utils";

import { useDropzone } from "react-dropzone";

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

    const router = useRouter();
    const { locale } = router;
    const {
        formObj,
        appellantApplicantRepresentationArr,
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
    } = 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 (
        <div id="rep-appellant">
            <div className="govuk-grid-column-full">
                <div className="govuk-grid-row">
                    <h2 className="govuk-heading-m ">
                        Representation from an Agent
                    </h2>

                    <div className="govuk-form-group">
                        <label
                            className="govuk-label govuk-body-m"
                            htmlFor="representationType"
                        >
                            What kind of representation are you making?
                        </label>
                        <Field
                            name="representationType"
                            component={RenderPickList}
                            datafieldname="representationType"
                            optionsArr={appellantApplicantRepresentationArr}
                        />
                    </div>
                </div>
                {/* <div className="govuk-grid-row">
                    <div className="govuk-form-group">
                        <Field
                            className="govuk-input govuk-!-width-three-quarters"
                            id="representationDescription"
                            name="representationDescription"
                            value="email"
                            data-aria-controls="representationDescription"
                            type="text"
                            component={RenderTextfield}
                            label="Description of representation"
                        />
                    </div>
                </div> */}
                <div className="govuk-grid-row">
                    <div className="govuk-form-group">
                        <Field
                            name="representationOnBehalfOf"
                            datafieldname="representationOnBehalfOf"
                            // label="In what capacity do you wish to make representations on this case?"
                            options={["Yes", "No"]}
                            id="representationOnBehalfOf"
                            className="govuk-radios__input"
                            errorMsg={t("newappeal:select-an-option-label")}
                            component={RenderCondtionalRadioList}
                            validate={[required]}
                            legend={
                                "Are you acting on behalf of a company, group or organisation?"
                            }
                        />
                    </div>
                </div>

                <div className="govuk-grid-row">
                    <div className="govuk-form-group">
                        <p className="govuk-body">
                            You can enter your comments in the space provided or
                            attach a separate document.
                        </p>
                        <fieldset
                            className="govuk-fieldset"
                            aria-describedby="commentBox-hint"
                        >
                            <div id="commentBox-hint" className="govuk-hint">
                                My comments are set out in:
                            </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"}
                                    label={"Add your files"}
                                    ticketnumber={props.props.caseReference}
                                    hint={"sdsd"}
                                    fileList={[]}
                                    setFilesForRepresentation={[]}
                                    containerID={
                                        props.props.props.accountDetails
                                            .containerID
                                    }
                                />
                            </div>
                            {props.currentView.caseReference.hasOwnProperty(
                                "repDetails"
                            ) &&
                            props.currentView.caseReference.repDetails.filesList
                                .length > 0 ? (
                                <div className="govuk-form-group govuk-!-margin-bottom-9">
                                    {props.currentView.caseReference.repDetails.filesList.map(
                                        (blob, i) => (
                                            <div
                                                key={blob.name + "_" + i}
                                                className="govuk-!-margin-bottom-5 fileThumb "
                                            >
                                                <img
                                                    src={getThumbnailIconByExtension(
                                                        blob.name
                                                    )}
                                                    alt={blob.name}
                                                    width="50"
                                                />

                                                <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
                                                    {blob.name} (
                                                    {bytesToSize(blob.size)})
                                                </span>
                                            </div>
                                        )
                                    )}
                                </div>
                            ) : (
                                ""
                            )}
                        </fieldset>
                    </div>{" "}
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-button-group">
                        <button
                            type="submit"
                            className="govuk-button"
                            data-module="govuk-button"
                        >
                            Continue
                        </button>
                        {/* <a
                            onClick={() => {
                                setRepresentationSubmit(true);
                            }}
                            className="govuk-button"
                        >
                            Continue ww
                        </a> */}
                        <a
                            onClick={() => {
                                setRepresentationCapacity();
                            }}
                            className="govuk-link"
                        >
                            Back
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default RepAgent;