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 ">
                    {t(
                        "myrepresentations:representation-from-an-agent-heading"
                    )}
                </h2>

                <div className="govuk-form-group">
                    <label
                        className="govuk-label govuk-body-m"
                        htmlFor="representationType"
                    >
                        {t("myrepresentations:kind-of-rep-label")}
                    </label>
                    {typeof props.representationType == "undefined" ||
                    typeof formObj.representationForm.values
                        .representationType == "undefined" ? (
                        <Field
                            name="representationType"
                            component={RenderPickList}
                            datafieldname="representationType"
                            optionsArr={appellantApplicantRepresentationArr}
                        />
                    ) : (
                        <label className="govuk-label govuk-body-m">
                            Representation Type:{" "}
                            {
                                formObj.representationForm.values
                                    .representationType
                            }{" "}
                        </label>
                    )}
                </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={t("myrepresentations:capacity-select-what-capacity-label")}
                        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">
                        {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"}
                            />
                            <p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
                                {t("myrepresentations:publish-policy-label")}
                                <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={t("myrepresentations:add-files-label")}
                                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"
                    >
                        {t("common:continue-button")}{" "}
                    </button>
                    {/* <a
                            onClick={() => {
                                setRepresentationSubmit(true);
                            }}
                            className="govuk-button"
                        >
                             {t("common:continue-button")} ww
                        </a> */}
                    <a
                        onClick={() => {
                            setRepresentationCapacity();
                        }}
                        className="govuk-link"
                    >
                        {t("common:back-link")}
                    </a>
                </div>
            </div>
        </>
    );
};

export default RepAgent;