import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import { Field, change, reduxForm } from "redux-form";
import { useState } from "react";

import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
import {
    FileUploadField,
    RenderPickList,
    RenderRichMultiline,
} from "./representationElements";

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,
        setRepFileName,
        updateRepresentation,
        setSavingStatus,
        savingStatus,
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

    setRepFileName(formObj.representationForm.values);

    let filterFilesList = props.currentView.caseReference.hasOwnProperty(
        "repDetails"
    )
        ? props.currentView.caseReference.repDetails.hasOwnProperty("filesList")
            ? props.currentView.caseReference.repDetails.filesList.filter(
                  function (el) {
                      return el != null;
                  }
              )
            : []
        : [];

    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-appellant-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">
                            {t("myrepresentations:representation-type")}:{" "}
                            {router.locale == "cy"
                                ? formObj.representationForm.values
                                      .representationType == "Questionnaire"
                                    ? "Holiadur"
                                    : formObj.representationForm.values
                                          .representationType == "Statement"
                                    ? "Datganiad"
                                    : formObj.representationForm.values
                                          .representationType ==
                                      "Final comments"
                                    ? "Sylwadau terfynol"
                                    : formObj.representationForm.values
                                          .representationType
                                : 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">
                        <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"}
                                    id={"representationDocuments"}
                                    label={t(
                                        "myrepresentations:add-files-label"
                                    )}
                                    ticketnumber={props.props.caseReference}
                                    hint={"sdsd"}
                                    fileList={[]}
                                    setFilesForRepresentation={[]}
                                    containerID={
                                        props.props.props.accountDetails
                                            .containerID
                                    }
                                    filenamePrefix={props.formObj}
                                />
                            </div>
                            {props.currentView.caseReference.hasOwnProperty(
                                "repDetails"
                            ) ? (
                                props.currentView.caseReference.repDetails.hasOwnProperty(
                                    "filesList"
                                ) &&
                                props.currentView.caseReference.repDetails
                                    .filesList.length > 0 ? (
                                    <div className="govuk-form-group govuk-!-margin-bottom-9">
                                        {filterFilesList.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>
                        {/* {router.query.state != "edit" && (
                            <a
                                onClick={() => {
                                    setRepresentationCapacity();
                                    props.updateField(
                                        "representationForm",
                                        "representationType",
                                        ""
                                    );
                                }}
                                className="govuk-link"
                            >
                                {t("common:back-link")}
                            </a>
                        )} */}

                        {savingStatus ? (
                            <span className=" progress-save-active">
                                {router.locale == "cy"
                                    ? "Nôl data"
                                    : "Saving data"}
                                <img
                                    className="data-loading-icon"
                                    src="/assets/images/loading.gif"
                                    alt={
                                        router.locale == "cy"
                                            ? "Nôl data"
                                            : "Saving data"
                                    }
                                />
                            </span>
                        ) : (
                            <button
                                className="govuk-button progress-save "
                                onClick={() => {
                                    let valuesObj =
                                        props.props.props.form[props.form]
                                            .values || {};

                                    console.log("valuesobj:", valuesObj);

                                    delete valuesObj["_pinswg_appellant_value"];

                                    console.log("on save:", valuesObj);
                                    updateRepresentation(
                                        valuesObj,
                                        false,
                                        true
                                    );
                                }}
                            >
                                {t("common:save-exit-button")}
                            </button>
                        )}
                    </div>
                </div>
            )}
        </>
    );
};

//const mapStateToProps = (state, props) => {};

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

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