import parseQueryString from "@insite/client-framework/Common/Utilities/parseQueryString";
import { createPageElement } from "@insite/client-framework/Components/ContentItemStore";
import DelayedSpinner from "@insite/client-framework/Components/DelayedSpinner";
import { HasShellContext, ShellContext, withIsInShell } from "@insite/client-framework/Components/IsInShell";
import ApplicationState from "@insite/client-framework/Store/ApplicationState";
import { loadPageByType } from "@insite/client-framework/Store/Data/Pages/PagesActionCreators";
import {
    getErrorStatusCodeByType,
    getLocation,
    getPageStateByType,
} from "@insite/client-framework/Store/Data/Pages/PageSelectors";
import { nullPage } from "@insite/client-framework/Store/Data/Pages/PagesState";
import * as React from "react";
import { connect, ResolveThunks } from "react-redux";

const mapStateToProps = (state: ApplicationState) => {
    const headerState = getPageStateByType(state, "Header");
    const headerStateErrorStatusCode = getErrorStatusCodeByType(state, "Header");
    const skipHeaderFooter = !!parseQueryString<{ skipHeaderFooter: string }>(getLocation(state).search)
        .skipHeaderFooter;

    const loadHeader = !skipHeaderFooter && !headerState.value && !headerState.isLoading && !headerStateErrorStatusCode;
    return {
        header: headerState.value || nullPage,
        loadHeader,
    };
};

const mapDispatchToProps = {
    loadPageByType,
};

type Props = ReturnType<typeof mapStateToProps> & ResolveThunks<typeof mapDispatchToProps> & HasShellContext;

class Header extends React.Component<Props> {
    UNSAFE_componentWillMount() {
        const { loadHeader, loadPageByType } = this.props;
        if (loadHeader) {
            loadPageByType("Header");
        }
    }

    render() {
        const {
            header,
            shellContext: { isInShell },
        } = this.props;
        if (header.id === "") {
            return <DelayedSpinner customHeight="250px" />;
        }

        return (
            <ShellContext.Provider value={{ isInShell, pageId: header.id }}>
                {createPageElement(header.type, header)}
            </ShellContext.Provider>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withIsInShell(Header));
