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 {
    bytesToSize,
    getThumbnailIconByExtension,
    updateLinks,
    getDocLink
} from "../utils";
import {
    dedupeFilesListByName,
    removeDuplicatesByKey
} from "../../lib/newappeal/fileListHelpers";
import {
    generateAppealPDFEffect,
    sendCaseCompleteMessageEffect
} from "../../lib/newappeal/journeyEffects";
import CheckSectionHeading from "./buildCheckSection/CheckSectionHeading";
import ConfirmationCheckboxGroup from "./buildCheckSection/ConfirmationCheckboxGroup";
import DocsOfflineNotice from "./buildCheckSection/DocsOfflineNotice";
import FinalisingStatePanel from "./buildCheckSection/FinalisingStatePanel";
import SectionReviewList from "./buildCheckSection/SectionReviewList";
import SubmitActionsPanel from "./buildCheckSection/SubmitActionsPanel";
import resolveCrmDisplayValue from "../../lib/i18n/crmDisplay/resolveCrmDisplayValue";

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

    let { t } = useTranslation();

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

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

    const legacyProps = props.props;
    const legacyAppealType = legacyProps.appealType;
    const legacyFormState = legacyProps.form;
    const legacyAccountDetails = legacyProps.accountDetails;

    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 = legacyAppealType.fileList?.value[0] || [];
    //let filesUploadObj = buildAppealFilesArray;
    // 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);

    buildAppealFilesArray = removeDuplicatesByKey(
        buildAppealFilesArray,
        "name"
    );

    let pdfObj = legacyFormState.appealForm.values;

    pdfObj = updateLinks(pdfObj);

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

    const [confirmSections, setConfirmSections] = useState(false);
    const [finaliseAppealProcess, setFinaliseAppealProcess] = useState(false);
    const [downloadAppealForm, setDownloadAppealForm] = useState(false);
    const [downloadInProgress, setDownloadInProgress] = useState(false);

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

        let formObj = jsonpath({
            path: "$['" + appealtypes + "']",
            json: fieldLookup,
            eval: true
        });

        let labelTrans = resolveCrmDisplayValue({
            value: label,
            locale,
            translations: formObj
        });
        return labelTrans;
    };

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

        const uniqueArray = dedupeFilesListByName(pdfObj.filesList);

        pdfObj.filesList = uniqueArray;
        pdfObj.locale = locale;

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

    const triggerAppealDownload = async () => {
        if (!downloadAppealForm) {
            return;
        }
        if (downloadInProgress) {
            return;
        }

        try {
            setDownloadInProgress(true);

            const uniqueArray = dedupeFilesListByName(pdfObj.filesList);

            pdfObj.filesList = uniqueArray;
            pdfObj.locale = locale;

            const containerID =
                props.accountDetails?.containerID ||
                legacyProps?.accountDetails?.containerID ||
                legacyProps?.props?.accountDetails?.containerID;
            const caseRef =
                props?.currentView?.caseReference?.ticketnumber ||
                props?.appealType?.caseReference?.ticketnumber;

            if (!containerID || !caseRef) {
                console.error(
                    "Appeal Form download skipped: missing containerID or case reference",
                    { containerID, caseRef }
                );
                return;
            }

            const pdfBlob = await generateAppealPDFEffect(
                pdfObj,
                containerID,
                caseRef,
                router.query.appealtypes,
                pdfObj.filesList,
                { download: true }
            );

            if (pdfBlob) {
                const blobUrl = window.URL.createObjectURL(pdfBlob);
                const anchor = document.createElement("a");
                anchor.href = blobUrl;
                anchor.download = `${"appealForm"}.pdf`;
                document.body.appendChild(anchor);
                anchor.click();
                anchor.remove();
                window.URL.revokeObjectURL(blobUrl);
            }
        } catch (error) {
            console.error("Appeal Form download failed", error);
        } finally {
            setDownloadInProgress(false);
        }
    };

    let ShowDocLinks = getDocLink(docsOffline);

    return (
        <div className="govuk-grid-row" key={1222}>
            <div className="govuk-grid-column-full">
                <div>
                    <CheckSectionHeading title="Are these answers correct?" />
                    <SectionReviewList>
                        {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>
                        ))}
                    </SectionReviewList>
                    {/* <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 ? (
                    <FinalisingStatePanel
                        heading={t("newappeal:new-appeal-finalising-heading")}
                        label={t("newappeal:new-appeal-finalising-label")}
                        waitLabel={t("newappeal:new-appeal-wait-label")}
                    />
                ) : (
                    <>
                        <ConfirmationCheckboxGroup
                            downloadAppealForm={downloadAppealForm}
                            onDownloadChange={(e) => {
                                setDownloadAppealForm(e.target.checked);
                            }}
                            onConfirmChange={(e) => {
                                setConfirmSections(!confirmSections);
                            }}
                            downloadLabel={t(
                                "newappeal:new-appeal-check-download-label"
                            )}
                            confirmLabel={t(
                                "newappeal:new-appeal-check-confirm-label"
                            )}
                            paragraphOne={t(
                                "newappeal:new-appeal-check-confirm-paragraph-one"
                            )}
                            paragraphTwo={t(
                                "newappeal:new-appeal-check-confirm-paragraph-two"
                            )}
                            paragraphTwoLink={
                                <Link
                                    target="_blank"
                                    href={t(
                                        "newappeal:new-appeal-check-confirm-paragraph-two-link"
                                    )}
                                >
                                    {t(
                                        "newappeal:new-appeal-check-confirm-paragraph-two-link"
                                    )}
                                </Link>
                            }
                        />

                        <SubmitActionsPanel>
                            {ShowDocLinks ? (
                                <DocsOfflineNotice
                                    noticeText={t(
                                        "myportal:docsoffline-newappeal-label"
                                    )}
                                    returnLink={
                                        <Link className="govuk-link" href="/">
                                            {t(
                                                "newappeal:return-to-myportal-link"
                                            )}
                                        </Link>
                                    }
                                />
                            ) : (
                                <>
                                    <button
                                        type="button"
                                        disabled={!confirmSections}
                                        className="govuk-button"
                                        data-module="govuk-button"
                                        onClick={async () => {
                                            await triggerAppealDownload();
                                            finaliseAppeal();
                                        }}
                                    >
                                        {t("newappeal:submit-appeal-button")}
                                    </button>
                                    <a
                                        className="govuk-link"
                                        href="#"
                                        onClick={() =>
                                            setCurrentSection(sectionCount)
                                        }
                                    >
                                        {t("common:back-link")}
                                    </a>
                                </>
                            )}
                        </SubmitActionsPanel>
                    </>
                )}
            </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)
);