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";

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

    function bytesToSize(bytes) {
        var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
        if (bytes == 0) return "0 Byte";
        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
        return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
    }

    const getThumbnailIconByExtension = (blobName) => {
        let fileType = blobName.slice(blobName.lastIndexOf(".") + 1);

        switch (fileType) {
            case "html":
                return "/assets/images/documenttypes/html.png";
                break;
            case "txt":
                return "/assets/images/documenttypes/txt.png";
                break;
            case "doc":
                return "/assets/images/documenttypes/doc.png";
                break;
            case "pdf":
                return "/assets/images/documenttypes/pdf.png";
                break;
            case "docx":
                return "/assets/images/documenttypes/docx.png";
                break;
            case "csv":
                return "/assets/images/documenttypes/csv.png";
                break;
            case "xlsx":
                return "/assets/images/documenttypes/xlsx.png";
                break;

            case "zip":
                return "/assets/images/documenttypes/zip.png";
                break;
            case "jpeg":
            case "jpg":
                return "/assets/images/documenttypes/jpg.png";
            case "png":
                return "/assets/images/documenttypes/png.png";
                break;
            default:
                return "/assets/images/documenttypes/txt.png";
                break;
        }
    };

    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">
                                {props.props.appealType.fileList.files.length >
                                0
                                    ? props.props.appealType.fileList.files.map(
                                          (blob, i) => (
                                              <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.contentLength
                                                      )}
                                                      )
                                                  </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)}
                    >
                        {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);