import Link from "next/link";
import { connect } from "react-redux";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { Field, reduxForm, change } 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,
        setRepFileName,
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
    setRepFileName(formObj.representationForm.values);

    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">
                <div className="govuk-form-group">
                    {typeof formObj.representationForm.values
                        .representationType == "undefined" &&
                    props.representationType != "Select..." ? (
                        <>
                            <h2 className="govuk-heading-m ">
                                {t(
                                    "myrepresentations:representation-from-an-agent-heading"
                                )}
                            </h2>

                            <label
                                className="govuk-label govuk-body-m"
                                htmlFor="representationType"
                            >
                                {t("myrepresentations:kind-of-rep-label")}
                            </label>

                            <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>
            {(typeof props.representationType != "undefined" ||
                typeof formObj.representationForm.values.representationType !=
                    "undefined") && (
                <>
                    <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"}
                                        id={"representationDocuments"}
                                        label={t(
                                            "myrepresentations:add-files-label"
                                        )}
                                        ticketnumber={props.props.caseReference}
                                        hint={"sdsd"}
                                        fileList={[]}
                                        setFilesForRepresentation={[]}
                                        containerID={
                                            props.props.props.accountDetails
                                                .containerID
                                        }
                                        filenamePrefix={props}
                                    />
                                </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>
                </>
            )}
            {typeof formObj.representationForm.values.representationType !=
                "undefined" && (
                <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={() => {
                                setRepresentationCapacity();
                                props.updateField(
                                    "representationForm",
                                    "representationCapacity",
                                    ""
                                );
                            }}
                            className="govuk-link"
                        >
                            {t("common:back-link")}
                        </a>
                    </div>
                </div>
            )}
        </>
    );
};

const mapDispatchToProps = (dispatch) => ({
    updateField: (form, field, newValue) =>
        dispatch(change(form, field, newValue)),
});

export default connect(
    null,
    mapDispatchToProps
)(
    reduxForm({
        form: "representationForm",
        enableReinitialize: true,
        destroyOnUnmount: false,
    })(RepAgent)
);