import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { useState, useEffect } from "react";
import xpath from "xpath";
import BuildCheckRow from "./buildcheckrow";
import { reduxForm, formValueSelector } from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import {
    setCurrentSection,
    setFormComplete,
} from "../../store/appealType/action";

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

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 filesUplaodObj = 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;
        }, {});

    console.log(filesUplaodObj);

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

    console.log(buildAppealFilesArray);

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

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

    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">
                                    {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">
                        <div className="govuk-summary-list__row" key={"9999"}>
                            <dt className="govuk-summary-list__key">
                                {buildAppealFilesArray.length > 0
                                    ? buildAppealFilesArray.map((blob, i) => {
                                          console.log(
                                              "thetre blbo:",
                                              buildAppealFilesArray,
                                              blob
                                          );
                                          return (
                                              <div
                                                  key={blob.name + "_" + i}
                                                  className="govuk-!-margin-bottom-5 fileThumb "
                                              >
                                                  <img
                                                      src={getThumbnailIconByExtension(
                                                          blob.name
                                                      )}
                                                      alt={blob.name.slice(
                                                          blob.name.indexOf(
                                                              "_"
                                                          ) + 1
                                                      )}
                                                      width="50"
                                                  />

                                                  <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
                                                      {blob.name.slice(
                                                          blob.name.indexOf(
                                                              "_"
                                                          ) + 1
                                                      )}
                                                      ({bytesToSize(blob?.size)}
                                                      )
                                                  </span>
                                              </div>
                                          );
                                      })
                                    : ""}
                            </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>
                <div className="govuk-button-group">
                    <a
                        className="govuk-button"
                        data-module="govuk-button"
                        onClick={() => {
                            setCurrentSection(9999),
                                generateAppealPDF(
                                    pdfObj,
                                    props.props.accountDetails.containerID,
                                    props.appealType.caseReference.ticketnumber,
                                    router.query.appealtypes,
                                    pdfObj.filesList
                                    // props.appealType.fileList
                                );
                        }}
                    >
                        {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);