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 { 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 {
    getSASToken,
    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";

import AdvertsForm from "../../data/forms/adverts";
import Callinss77Form from "../../data/forms/callinss77";
import CommonLandForm from "../../data/forms/commonland";
import CommunityInfrastructureLevys117118119Form from "../../data/forms/communityinfrastructurelevys117118119";
import CompulsoryPurchaseOrdersForm from "../../data/forms/compulsorypurchaseorders";
import DNSForm from "../../data/forms/dns";
import ElectricityActForm from "../../data/forms/electricityact";
import EnforcementListedBuildingConservationapForm from "../../data/forms/enforcementlistedbuildingconservationap";
import EnforcementNoticeAppeals174Form from "../../data/forms/enforcementnoticeappeals174";
import EnvironmentalPermittingForm from "../../data/forms/environmentalpermitting";
import HarbourRevisionOrderForm from "../../data/forms/harbourrevisionorder";
import HedgesHedgerowsTreePreservationReplacemForm from "../../data/forms/hedgeshedgerowstreepreservationreplacem";
import HouseholderAppealHasForm from "../../data/forms/householderappealhas";
import LawfulDevelopmentCertificateForm from "../../data/forms/lawfuldevelopmentcertificate";
import LdpForm from "../../data/forms/ldp";
import ListedBuildingAndConservationAreaConsenForm from "../../data/forms/listedbuildingandconservationareaconsen";
import MaintenanceOfLands217Form from "../../data/forms/maintenanceoflands217";
import MiscellaneousCaseworkForm from "../../data/forms/miscellaneouscasework";
import NonValidationForm from "../../data/forms/nonvalidation";
import PlanningAppeals78Form from "../../data/forms/planningappeals78";
import PlanningConditionss73s79Form from "../../data/forms/planningconditionss73s79";
import PlanningObligationAppeals106Form from "../../data/forms/planningobligationappeals106";
import RowForm from "../../data/forms/row";
import TransportAndWorkActForm from "../../data/forms/transportandworkact";
import WayleaveForm from "../../data/forms/wayleave";

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 selectedObj = jsonpath.query(
        optionsStr,
        "$..[?(@.attributevalue=='" + router.query.apt + "')]"
    );

    //let optionsTitleObj = [];

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

    const formTitle = selectedObj[0].value;

    const getFormType = (appealType) => {
        switch (appealType) {
            case "adverts":
                return <AdvertsForm props={props} />;
            case "callinss77":
                return <Callinss77Form props={props} />;
            case "commonland":
                return <CommonLandForm props={props} />;
            case "communityinfrastructurelevys117118119":
                return (
                    <CommunityInfrastructureLevys117118119Form props={props} />
                );
            case "compulsorypurchaseorders":
                return <CompulsoryPurchaseOrdersForm props={props} />;
            case "dns":
                return <DNSForm props={props} />;
            case "electricityact":
                return <ElectricityActForm props={props} />;
            case "enforcementlistedbuildingconservationap":
                return (
                    <EnforcementListedBuildingConservationapForm
                        props={props}
                    />
                );
            case "enforcementnoticeappeals174":
                return <EnforcementNoticeAppeals174Form props={props} />;
            case "environmentalpermitting":
                return <EnvironmentalPermittingForm props={props} />;
            case "harbourrevisionorder":
                return <HarbourRevisionOrderForm props={props} />;
            case "harbourrhedgeshedgerowstreepreservationreplacemevisionorder":
                return (
                    <HedgesHedgerowsTreePreservationReplacemForm
                        props={props}
                    />
                );
            case "householderappealhas":
                return <HouseholderAppealHasForm props={props} />;
            case "lawfuldevelopmentcertificate":
                return <LawfulDevelopmentCertificateForm props={props} />;

            case "ldp":
                return <LdpForm props={props} />;

            case "listedbuildingandconservationareaconsen":
                return (
                    <ListedBuildingAndConservationAreaConsenForm
                        props={props}
                    />
                );
            case "maintenanceoflands217":
                return <MaintenanceOfLands217Form props={props} />;

            case "miscellaneouscasework":
                return <MiscellaneousCaseworkForm props={props} />;

            case "nonvalidation":
                return <NonValidationForm props={props} />;

            case "planningappeals78":
                return <PlanningAppeals78Form props={props} />;

            case "planningconditionss73s79":
                return <PlanningConditionss73s79Form props={props} />;

            case "planningobligationappeals106":
                return <PlanningObligationAppeals106Form props={props} />;

            case "row":
                return <RowForm props={props} />;

            case "transportandworkact":
                return <TransportAndWorkActForm props={props} />;
            case "wayleave":
                return <WayleaveForm props={props} />;

            default:
                return <HouseholderAppealHasForm props={props} />;
        }
        re;
    };

    const { onSubmit } = props;

    return (
        <div>
            <Head>
                <title>
                    {t("newappeal:page-title")} - {t("common:service-name")}
                </title>
                <>
                    <link
                        rel="canonical"
                        href={t("common:gov-wales-link") + router.asPath}
                    />
                    <meta
                        key="og:locale"
                        property="og:locale"
                        content={router.locale}
                    />
                    {/* If they have a Twitter Handle, include the meta details below */}
                    <meta
                        key="og:site_name"
                        property="og:site_name"
                        content={t("common:service-name")}
                    />
                    <meta
                        key="twitter:site"
                        property="twitter:site"
                        content="@UKGovWales"
                    />

                    <meta
                        name="description"
                        content={t("common:service-description")}
                    />
                    <meta
                        property="og:site_name"
                        content={t("common:gov-wales-label")}
                    />
                    <meta
                        property="og:title"
                        content={t("newappeal:page-title")}
                    />
                    <meta
                        property="og:description"
                        content={t("common:service-description")}
                    />
                    <meta property="og:type" content="website" />
                    <meta
                        property="og:url"
                        content={t("common:gov-wales-link")}
                    />
                    <meta
                        property="og:image"
                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
                    />
                    <meta name="twitter:card" content="summary" />
                    <meta
                        name="twitter:title"
                        content={t("common:gov-wales-label")}
                    />
                    <meta
                        name="twitter:url"
                        content={t("common:gov-wales-link") + router.asPath}
                    />
                    <meta
                        name="twitter:image"
                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
                    />
                </>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
                <Header courseName={t("common:service-name")} />

                <div className="govuk-width-container">
                    <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}
                                key={1}
                                mandatoryFieldsData={
                                    props.formData.mandatoryFieldsData
                                }
                            />
                        ) : (
                            <>
                                <BuildSection
                                    formXML={formXML}
                                    sectionCount={sectionCount}
                                    onSubmit={onSubmit}
                                    formTitle={formTitle}
                                    mandatoryFieldsData={
                                        props.formData.mandatoryFieldsData
                                    }
                                    props={props}
                                />
                                {/* {getFormType(appealtypes)} */}
                            </>
                        )}
                    </main>
                </div>

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

export const getServerSideProps = wrapper.getServerSideProps(
    (store) => async (ctx) => {
        const { query, req, res } = ctx;
        const { cookies } = req;

        console.log(cookies);
        console.log("the query", query);
        let loggedInUser = cookies.pinsUser;

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

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

        //console.log(caseReference, query.appealtypes, formdata);
        store.dispatch(setLoggedInUserId(loggedInUser));
        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);