import { JSONPath as jsonpath } from "jsonpath-plus";
import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { connect } from "react-redux";
import { formValueSelector, Field, reduxForm } from "redux-form";
import xpath from "xpath";
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
import {
    setCurrentSection,
    setFormComplete,
} from "../../store/appealType/action";
import BuildCheckRow from "./buildcheckrow";

import { generateAppealPDF, sendCaseCompleteMessage } from "../../actions";
import { bytesToSize, getThumbnailIconByExtension } from "../utils";

let BuildCheckSection = (props) => {
    useEffect(() => {
        setFormComplete();
    }, []);

    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    const {
        formXML,
        sectionCount,
        onSubmit,
        handleSubmit,
        formTitle,
        setCurrentSection,
        updateCurrentSection,
        mandatoryFieldsData,
    } = props;

    const parser = new DOMParser();
    var doc = parser.parseFromString(props.formXML, "text/xml");
    var titles = xpath.select(
        "//form/tabs/tab[*]/labels/label/@description",
        doc
    );
    var rowXML = xpath.select(
        "/form/tabs/tab[*]/columns//sections/section/rows/row",
        doc
    );

    var titleList = xpath.select(
        "//form/tabs/tab[*]/labels/label/@description",
        doc
    );

    const handleParam = (setValue) => (e) => setValue(e.target.value);

    // const basicSearch = (event) => {
    //     event.preventDefault();
    //     //console.log(query);
    //     // /searchresults
    // };

    const onHandleSubmit = (values) => {
        //alert(1);
        //updateCaseProgress(values);
        // setCurrentSection(9999);

        alert(1);
    };

    let buildAppealFilesArray = [];
    //console.log("attached docs: - ", buildAppealFilesArray);
    buildAppealFilesArray = props.props.form.appealForm.values.filesList || [];

    let filesUploadObj = props.appealType.fileList.hasOwnProperty("value")
        ? props.appealType.fileList.value[0]
        : [];

    for (let key in filesUploadObj) {
        typeof filesUploadObj[key].name != "undefined" &&
            buildAppealFilesArray.push({
                "name": filesUploadObj[key].name,
                "size": filesUploadObj[key].contentLength,
            });
    }

    buildAppealFilesArray.filter(function (item, idx) {
        return item.name;
    });
    //console.log(buildAppealFilesArray);

    function removeDuplicates(arr, key) {
        const seen = new Set();
        return arr.filter((item) => {
            const value = item[key];
            if (seen.has(value)) {
                return false; // Duplicate found
            } else {
                seen.add(value); // Add value to the set
                return true; // Keep the item
            }
        });
    }

    buildAppealFilesArray = removeDuplicates(buildAppealFilesArray, "name");

    let pdfObj = props.props.form.appealForm.values;

    Object.assign(pdfObj, {
        "containerID": props.props.accountDetails.containerID,
        "casefolderID": props.appealType.caseReference.ticketnumber,
    });

    const [confirmSections, setConfirmSections] = useState(false);
    const [finaliseAppealProcess, setFinaliseAppealProcess] = useState(false);

    const FieldsTranslations = (label) => {
        const router = useRouter();
        const { locale } = router;
        const { appealtypes } = router.query;

        let formObj = jsonpath("$['" + appealtypes + "']", fieldLookup);

        let labelTrans =
            router.locale == "cy"
                ? jsonpath('$..[?(@.value=="' + label + '")].value_cy', formObj)
                : label;
        return labelTrans;
    };

    const finaliseAppeal = async () => {
        //console.log("finalising appeal:", pdfObj);

        const uniqueArray = pdfObj.filesList.filter(
            (value, index, self) =>
                index === self.findIndex((t) => t.name === value.name)
        );

        pdfObj.filesList = uniqueArray;

        confirmSections
            ? (setFinaliseAppealProcess(true),
              await generateAppealPDF(
                  pdfObj,
                  props.props.accountDetails.containerID,
                  props.appealType.caseReference.ticketnumber,
                  router.query.appealtypes,
                  pdfObj.filesList
                  // props.appealType.fileList
              )
                  .then((data) => {
                      console.log("have generated pdf:", data);
                      sendCaseCompleteMessage(
                          props.props.accountDetails.containerID,
                          props.appealType.caseReference.ticketnumber,
                          props.props.accountDetails.accountDetails
                              .pinswg_typeofinvolvement
                      );
                  })
                  .then(() => {
                      //console.log("have sent complete message :");
                      setCurrentSection(9999);
                  }))
            : setConfirmSections(false);
    };

    return (
        <div className="govuk-grid-row" key={1222}>
            <div className="govuk-grid-column-full">
                <div>
                    <h1 className="govuk-heading-m">
                        Are these answers correct?
                    </h1>
                    <dl className="govuk-summary-list ">
                        {Object.keys(titles).map((key) => (
                            <div key={key}>
                                <h2 className="govuk-heading-m govuk-!-margin-top-9">
                                    {FieldsTranslations(titles[key].value)}
                                </h2>

                                <BuildCheckRow
                                    formXML={formXML}
                                    whichSection={parseInt(key) + 1}
                                    sectionCount={key}
                                    props={props}
                                    key={key}
                                    mandatoryFieldsData={mandatoryFieldsData}
                                    filesArray={buildAppealFilesArray}
                                />
                            </div>
                        ))}
                    </dl>
                    {/* <dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list">
                        {buildAppealFilesArray.length > 0
                            ? buildAppealFilesArray.map((blob, i) => {
                                  return (
                                      <div
                                          className="govuk-summary-list__row"
                                          key={i}
                                      >
                                          <dt className="govuk-summary-list__key  govuk-!-padding-left-5">
                                              <div
                                                  key={blob.name + "_" + i}
                                                  className="govuk-!-margin-bottom-5 fileThumb "
                                              >
                                                  <img
                                                      src={getThumbnailIconByExtension(
                                                          blob.name
                                                      )}
                                                      alt={blob.name}
                                                      width="50"
                                                  />
                                              </div>
                                          </dt>
                                          <dt className="govuk-summary-list__value">
                                              <span className="govuk-body govuk-!-font-size-14">
                                                  {blob.name} (
                                                  {bytesToSize(
                                                      blob.size ||
                                                          blob.contentLength
                                                  )}
                                                  )
                                              </span>
                                          </dt>
                                          <dd className="govuk-summary-list__actions">
                                              <a
                                                  className="govuk-link"
                                                  href="#"
                                                  onClick={() => {
                                                      setCurrentSection(
                                                          sectionCount
                                                      );
                                                  }}
                                              >
                                                  {t(
                                                      "newappeal:change-link-label"
                                                  )}
                                              </a>
                                          </dd>
                                      </div>
                                  );
                              })
                            : ""}
                    </dl> */}
                </div>
                {finaliseAppealProcess ? (
                    <div className="">
                        <h3 className="govuk-heading-m govuk-!-margin-top-9">
                            Finalising your appeal submission
                        </h3>
                        <p className="govuk-body">
                            Currenly uploading files and finalising your appeal
                            submission
                        </p>
                        <p className="govuk-body textloading">Please wait</p>
                    </div>
                ) : (
                    <>
                        <div className="govuk-form-group ">
                            <fieldset className="govuk-fieldset">
                                <div className="govuk-checkboxes govuk-checkboxes--small">
                                    <div className="govuk-checkboxes__item">
                                        <input
                                            name="pinswg_checkconfirmation"
                                            id="pinswg_checkconfirmation"
                                            type="checkbox"
                                            className="govuk-checkboxes__input"
                                            value=""
                                            onChange={(e) => {
                                                setConfirmSections(
                                                    !confirmSections
                                                );
                                            }}
                                        />
                                        <label
                                            className="govuk-label govuk-checkboxes__label"
                                            htmlFor="pinswg_checkconfirmation"
                                        >
                                            {t(
                                                "newappeal:new-appeal-check-confirm-label"
                                            )}
                                        </label>
                                    </div>
                                </div>
                            </fieldset>
                            <div>
                                <p className="govuk-body">
                                    {t(
                                        "newappeal:new-appeal-check-confirm-paragraph-one"
                                    )}
                                </p>
                            </div>
                            <div>
                                <p className="govuk-body">
                                    {t(
                                        "newappeal:new-appeal-check-confirm-paragraph-two"
                                    )}{" "}
                                    <Link
                                        href={t(
                                            "newappeal:new-appeal-check-confirm-paragraph-two-link"
                                        )}
                                    >
                                        {t(
                                            "newappeal:new-appeal-check-confirm-paragraph-two-link"
                                        )}
                                    </Link>
                                </p>
                            </div>
                        </div>

                        <div className="govuk-button-group">
                            <a
                                disabled={confirmSections ? false : true}
                                className="govuk-button"
                                data-module="govuk-button"
                                onClick={() => {
                                    finaliseAppeal();
                                }}
                            >
                                {t("newappeal:submit-appeal-button")}
                            </a>
                            <a
                                className="govuk-link"
                                href="#"
                                onClick={() => setCurrentSection(sectionCount)}
                            >
                                {t("common:back-link")}
                            </a>
                        </div>
                    </>
                )}
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        form: state.form,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentSection: (currentSection) => {
            dispatch(setCurrentSection(currentSection));
        },
        updateCurrentSection: (whichSection) => {
            dispatch(setCurrentSection(whichSection));
            dispatch(setFormComplete("true"));
        },
    };
};

// BuildCheckSection = reduxForm({
//     // a unique name for the form
//     form: "sssappealForm",
//     destroyOnUnmount: false,
// })(BuildCheckSection);

const selector = formValueSelector("appealForm"); // <-- same as form name

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "appealForm",
        destroyOnUnmount: false,
        enableReinitialize: true, // this is needed!!
    })(BuildCheckSection)
);