import _ from "lodash";
import Head from "next/head";
import Header from "../../components/header";
import Banner from "../../components/banner";
import CookieBanner from "../../components/cookieBanner";
import Breadcrumbs from "../../components/breadcrumbs";
import Footer from "../../components/footer";
import Errorpage from "../../components/errorpage";
import styles from "../../styles/Home.module.css";
import { useSelector, shallowEqual, connect } from "react-redux";
import { wrapper } from "../../store/store";
import Cookies from "cookies";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import { useEffect } from "react";
import {
    setLoggedInUserId,
    setAccountDetails,
} from "../../store/accountDetails/action";
import {
    setAppealType,
    setAppealTypeTitle,
    setAppealTypeID,
    getAppealTypeObj,
    setAppealLPA,
    setCaseReference,
} from "../../store/appealType/action";
import { setForm, getFormObj } from "../../store/formData/action";
import {
    getFormData,
    getAppealsTypes,
    getMandatoryFields,
    createCase,
    getPickLists,
    updateCase,
} from "../../actions";

import xpath from "xpath";
import { reduxForm, FormName } from "redux-form";

import BuildSection from "../../components/newappeal/buildsection";
import BuildCheckSection from "../../components/newappeal/buildchecksection";
import CompleteAppeal from "../../components/newappeal/complete";

let Home = (props) => {
    const { footerLinks, pages, formData } = props;
    let { t, lang } = useTranslation();

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

    useEffect(() => {
        //setFormTitle(formTitle);
        setCaseReference(router.query.refno);
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    const formXML = props.formData.formData;
    const parser = new DOMParser();
    var doc = parser.parseFromString(formXML, "text/xml");
    var titles = xpath.select(
        "//form/tabs/tab[*]/labels/label[@description]/@description",
        doc
    );
    var sectionCount = xpath.select("/form/tabs/tab[*]", doc);
    sectionCount = 1; //sectionCount.length;

    var tabs = xpath.select("//form/tabs/tab[*]", doc);

    let optionsStr = props.appealType.appealTypeOptions.value;

    let selectedObj = jsonpath.query(optionsStr, "$..value");

    //let optionsTitleObj = [];

    const optionsTitleObj = selectedObj.reduce(
        (obj, arrValue) => (
            (obj[arrValue] = arrValue
                .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
                .toLowerCase()
                .slice(0, 39)),
            obj
        ),
        {}
    );

    const formTitle = Object.keys(optionsTitleObj).find(
        (key) => optionsTitleObj[key] === appealtypes
    );

    //console.log(formTitle);

    // crm api query for looking up picklist fields/drop downs
    // <url path to >/api/data/v8.2/EntityDefinitions(LogicalName='{appeal type form}')/Attributes(LogicalName='{drop down datafield name}')/Microsoft.Dynamics.CRM.PicklistAttributeMetadata?$select=LogicalName&$expand=GlobalOptionSet($select=Options)
    // eg https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/EntityDefinitions(LogicalName='pinswg_householderappealhas')/Attributes(LogicalName='pinswg_casetype')/Microsoft.Dynamics.CRM.PicklistAttributeMetadata?$select=LogicalName&$expand=GlobalOptionSet($select=Options)
    // query for labels in section  eg for section 2 -  /form/tabs/tab[2]//rows//labels
    // query for getting guids of form element types /form/tabs/tab[*]//rows/row//control[@classid]/@classid
    //
    //      270BD3DB-D9AF-4782-9025-509E298DEC0A - read only
    //      3EF39988-22BB-4f0b-BBBE-64B5A3748AEE - drop down list controlled by datafieldname for content - datafieldname picklist entity
    //      67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED - boolean flag / yes no radio button
    //      4273EDBD-AC1D-40d3-9FB2-095C621B552D - text field
    //      5B773807-9FB2-42db-97C3-7A91EFF8ADFF - date field
    //      E0DECE4B-6FC8-4a8f-A065-082708572369 - multiline
    //      C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F - numeric field
    //      C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E - decimal

    /// to get dropdowns names
    //  form/tabs/tab[*]//rows/row//control[@classid="{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"]/@datafieldname

    const { onSubmit } = props;

    return (
        <div>
            <Head>
                <title>
                    {t("search:page-title")} - {t("common:service-name")}
                </title>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
                <Header courseName={t("common:service-name")} />

                <div className="govuk-width-container">
                    <Banner />
                    <Breadcrumbs slug={appealtypes} formTitle={formTitle} />
                    <main
                        className="govuk-main-wrapper--auto-spacing"
                        id="main-content"
                        role="main"
                    >
                        {props.appealType.currentSection == 9999 ? (
                            <CompleteAppeal props={props} />
                        ) : props.appealType.currentSection ==
                          sectionCount + 1 ? (
                            <BuildCheckSection
                                formXML={formXML}
                                sectionCount={sectionCount}
                                onSubmit={onSubmit}
                                formTitle={formTitle}
                                appealType={props.appealType}
                                props={props}
                                mandatoryFieldsData={
                                    props.formData.mandatoryFieldsData
                                }
                            />
                        ) : (
                            <BuildSection
                                formXML={formXML}
                                sectionCount={sectionCount}
                                onSubmit={onSubmit}
                                formTitle={formTitle}
                                mandatoryFieldsData={
                                    props.formData.mandatoryFieldsData
                                }
                                props={props}
                            />
                        )}
                    </main>
                </div>

                <Footer footerLinks={footerLinks} />
            </div>
        </div>
    );
};

export const getServerSideProps = wrapper.getServerSideProps(
    (store) =>
        async ({ query, req, res }) => {
            console.log("the query", query);

            const [
                caseReferenceData,
                appealTypeData,
                mandatoryFieldsData,
                pickListData,
                formdata,
            ] = await Promise.all([
                await createCase(query.apt),
                await getAppealsTypes(),
                await getMandatoryFields(query.appealtypes),
                await getPickLists(query.appealtypes),
                await getFormData(query.appealtypes),
            ]);

            // let updateCaseReferenceData = await updateCase(
            //     caseReferenceData.incidentid,
            //     query.apt
            // );

            const cookies = new Cookies(req, res);
            // Get a cookie

            console.log(cookies.get("pipinsUser"));

            let caseReference = caseReferenceData;
            let xmlStr = formdata;
            xmlStr = formdata.value[0].formxml;
            xmlStr = xmlStr.replace(/\\"/g, "");

            //console.log(caseReference, query.appealtypes, formdata);
            store.dispatch(
                setLoggedInUserId("f8b454ed-eded-eb11-aac7-00224800be9c")
            );
            store.dispatch(setAppealLPA(query.lpa));
            store.dispatch(setAppealTypeID(query.apt));
            store.dispatch(setCaseReference(caseReference));
            store.dispatch(setForm(xmlStr, mandatoryFieldsData, pickListData));
            store.dispatch(setAppealType(appealTypeData));
        }
);

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

const mapDispatchToProps = (dispatch) => {
    return {
        setFormTitle: (title) => {
            dispatch(setAppealTypeTitle(title));
        },
        setCaseReference: (refno) => {
            dispatch(setCaseReference(refno));
        },
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);