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

    console.log(JSON.stringify(formObj) == "{}" ? "empty" : "value");

    if (JSON.stringify(formObj) != "{}") {
        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;
                      }
                  )
                : []
            : [];

        filterFilesList = filterFilesList.filter(
            (value, index, self) =>
                index === self.findIndex((t) => t.name === value.name)
        );

        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={
                                            props.currentView.caseReference.hasOwnProperty(
                                                "repDetails"
                                            )
                                                ? props.currentView.caseReference.repDetails.hasOwnProperty(
                                                      "filesList"
                                                  ) &&
                                                  props.currentView
                                                      .caseReference.repDetails
                                                      .filesList.length > 0
                                                    ? props.currentView
                                                          .caseReference
                                                          .repDetails.filesList
                                                    : []
                                                : []
                                        }
                                        setFilesForRepresentations={
                                            setFilesForRepresentations
                                        }
                                        containerID={
                                            props.props.props.accountDetails
                                                .containerID
                                        }
                                        filenamePrefix={props.formObj}
                                        props={props.props.props}
                                        setCurrentReference={
                                            props.setCurrentReference
                                        }
                                    />
                                </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) => {
    return {
        updateField: (form, field, newValue) =>
            dispatch(change(form, field, newValue)),

        setFilesForRepresentations: (fileList) => {
            dispatch(setFilesForRepresentations(fileList));
        },
    };
};

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