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 } 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);

    // let filesUploadObj = Object.keys(props.props.form.appealForm.values)
    //     .filter(function (k) {
    //         return k.indexOf("pinswg_fileUpload") == 0;
    //     })
    //     .reduce(function (newData, k) {
    //         newData[k] = props.props.form.appealForm.values[k];
    //         return newData;
    //     }, {});

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

    buildAppealFilesArray = props.props.form.appealForm.values.filesList;

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

    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 () => {
        setFinaliseAppealProcess(true);
        console.log("finalising appeal:");
        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
                );
            })
            .then(() => {
                console.log("have sent complete message :");
                setCurrentSection(9999);
            });
    };

    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}
                                />
                            </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={() => {
                                                      updateCurrentSection(
                                                          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>
                        </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)(BuildCheckSection);