import Link from "next/link";
import { connect } from "react-redux";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { Field, reduxForm, reset } from "redux-form";
import React, { useCallback, useEffect, useMemo, useState } from "react";

import {
    RenderPickList,
    RenderTextfield,
    RenderRadioList,
    RenderMultiline,
    RenderRichMultiline,
    RenderFileUpload,
    FileUploadField,
    RepresentationGuidanceText,
} from "./representationElements";
import {
    getFormCollectionByID,
    getThumbnailIconByExtension,
    bytesToSize,
} from "../../utils";

import { useDropzone } from "react-dropzone";
// import {
//     setRepresentationCapacity,
//     setRepresentationSubmit,
// } from "../../../store/currentView/action";

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

    const router = useRouter();
    const { locale } = router;
    const {
        formObj,
        appellantApplicantRepresentationArr,
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

    // console.log(props);

    return (
        <>
            <div className="govuk-grid-row">
                <div className="govuk-form-group">
                    <h2 className="govuk-heading-m ">
                        {t(
                            "myrepresentations:representation-from-an-appellant-heading"
                        )}
                    </h2>
                    <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> */}

            {(typeof props.representationType != "undefined" ||
                typeof formObj.representationForm.values.representationType !=
                    "undefined") && (
                <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"}
                                />
                                {formObj.representationForm.values.appealType ==
                                "846040004" ? (
                                    <p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
                                        {t(
                                            "myrepresentations:questionnaire-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>
                                ) : (
                                    <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 RepAppellant;