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 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"}
                            />
                            <p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
                                Please note that all representations may be
                                published in line with our Publishing Policy.
                                Should your representation include any sensitive
                                information or potentially defamatory
                                information, it may be redacted before
                                publishing. If it contains racist, libellous or
                                offensive content it will be returned to you and
                                you will be asked to provide an amended version.{" "}
                                <a href="https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html">
                                    https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html
                                </a>
                            </p>
                        </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>
        </>
    );
};

export default RepAgent;