import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { EpsgCode, GoogleTms, Nztm2000QuadTms } from '@basemaps/geo';
import { clsx } from 'clsx';
import { Component, Fragment } from 'react';
import { Config, gaEvent } from '../config.js';
import { Copyable } from './copyable.js';
import { LayerSwitcherDropdown } from './layer.switcher.dropdown.js';
import { Icon, Link } from './link.js';
export class Header extends Component {
    constructor(p) {
        super(p);
        Object.defineProperty(this, "_events", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: []
        });
        Object.defineProperty(this, "menuToggle", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: () => {
                const isMenuOpen = !this.state.isMenuOpen;
                gaEvent("Ui" /* GaEvent.Ui */, isMenuOpen ? 'menu:open' : 'menu:close');
                this.setState({ isMenuOpen });
            }
        });
        Object.defineProperty(this, "contactUs", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: () => {
                const subject = 'Request Basemaps Developer Access';
                const body = `
Give us a few key details to sign up for Developer Access to LINZ Basemaps. We will respond with your Apps' unique API key.

Your Name:

Your Email:

Your Service/App URL:

`;
                gaEvent("Ui" /* GaEvent.Ui */, 'contact-us:click');
                window.location.href = `mailto:basemaps@linz.govt.nz?subject=${encodeURI(subject)}&body=${encodeURI(body)}`;
            }
        });
        /** Projections to show WMTS links for */
        Object.defineProperty(this, "_validProjections", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: new Set([EpsgCode.Google, EpsgCode.Nztm2000])
        });
        this.state = { isMenuOpen: false };
    }
    componentDidMount() {
        this.setState({ isMenuOpen: false });
        this._events.push(Config.map.on('change', () => this.forceUpdate()));
        this._events.push(Config.map.on('filter', () => this.renderLinksTiles()));
        // If individual layers are on, we need the layer info to determine if they can use NZTM2000Quad WMTS
        void Config.map.layers.then((layers) => this.setState({ layers }));
    }
    componentWillUnmount() {
        for (const e of this._events)
            e();
        this._events = [];
    }
    render() {
        const isMenuOpen = this.state?.isMenuOpen ?? false;
        if (Config.map.isDebug)
            return;
        return (_jsxs("header", { className: "LuiHeaderV2 LuiHeaderV2-small", children: [_jsxs("div", { className: "LuiHeaderV2-row", children: [_jsxs("div", { className: "LuiHeaderV2-col", children: [_jsx("div", { className: "LuiHeaderV2-logo", children: _jsx("img", { className: "LuiHeaderV2-linz-motif", src: "/assets/logo-linz.svg", width: "150px" }) }), _jsx("div", { className: "LuiHeaderV2-title", children: _jsx("h1", { children: "Basemaps" }) })] }), _jsx("div", { className: "LuiHeaderV2-col", children: _jsx("div", { className: "LuiHeaderV2-menu-item", children: _jsx("div", { className: "LuiHeaderV2-menu-icon", children: _jsx("i", { className: "material-icons-round md-36", onClick: this.menuToggle, style: { cursor: 'pointer' }, children: isMenuOpen ? 'close' : 'menu' }) }) }) })] }), _jsxs("div", { className: clsx({
                        'lui-menu-drawer': true,
                        'lui-menu-drawer-closed': !isMenuOpen,
                        'lui-menu-drawer-wide': true,
                    }), "aria-hidden": isMenuOpen, children: [_jsx(LayerSwitcherDropdown, {}), this.renderLinks(), _jsx("h6", { children: "Developer API Keys" }), _jsx("p", { children: "Contact us for free API keys with better support for public web and mobile apps." }), _jsx("button", { className: "lui-button lui-button-primary contact-us", onClick: this.contactUs, children: "Contact us" }), this.renderAbout()] })] }));
    }
    renderAboutLi(text, href, icon) {
        return (_jsx("li", { children: _jsxs(Link, { href: href, children: [text, icon == null ? _jsx(Icon, { name: "launch" }) : icon] }) }));
    }
    renderAbout() {
        return (_jsxs(Fragment, { children: [_jsx("h6", { children: "About Basemaps" }), _jsxs("ul", { className: "about-links", children: [this.renderAboutLi('Get started', 'https://www.linz.govt.nz/data/linz-data/linz-basemaps/get-started-linz-basemaps'), this.renderAboutLi('Technical information', 'https://www.linz.govt.nz/data/linz-data/linz-basemaps/linz-basemaps-documentation'), this.renderAboutLi('How to use our APIs', 'https://www.linz.govt.nz/data/linz-data/linz-basemaps/how-use-linz-basemaps-apis'), this.renderAboutLi('Github', 'https://github.com/linz/basemaps', this.renderGithubLogo()), _jsx("li", { children: _jsxs(Link, { href: "https://github.com/linz/basemaps/blob/master/CHANGELOG.md", children: ["Version", ' ', _jsx("span", { className: "basemaps-version", title: `Build: ${Config.BuildId}`, children: Config.Version })] }) })] })] }));
    }
    renderGithubLogo() {
        return (_jsx("svg", { style: { width: '24px', height: '24px' }, viewBox: "0 0 24 24", children: _jsx("path", { fill: "currentColor", d: "M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" }) }));
    }
    renderLinks() {
        return (_jsxs(Fragment, { children: [_jsx("h6", { children: "90 day API keys" }), _jsx("p", { children: "API keys expire after 90 days, if a longer duration is needed please request a developer API key" }), _jsx(Copyable, { header: "Api Key", value: Config.ApiKey }), this.renderLinksTiles()] }));
    }
    validProjections() {
        if (this.state?.layers == null)
            return this._validProjections;
        return this.state.layers.get(Config.map.layerId)?.projections ?? this._validProjections;
    }
    renderLinksTiles() {
        if (Config.map.isVector) {
            return (_jsxs(Fragment, { children: [_jsx(Copyable, { header: "StyleJSON", value: Config.map.toTileUrl("style" /* MapOptionType.Style */) }, "StyleJSON"), _jsx(Copyable, { header: "XYZ", value: Config.map.toTileUrl("vector-xyz" /* MapOptionType.TileVectorXyz */) }, "XYZ")] }));
        }
        const projections = this.validProjections();
        const children = [];
        if (projections.has(EpsgCode.Nztm2000)) {
            const nztmTileUrl = Config.map.toTileUrl("wmts" /* MapOptionType.Wmts */, Nztm2000QuadTms, undefined, undefined, undefined, Config.map.filter.date);
            children.push(_jsx(Copyable, { header: "WMTS: NZTM2000Quad", value: nztmTileUrl }, "NZTM2000Quad"));
        }
        if (projections.has(EpsgCode.Google)) {
            const googleTileUrl = Config.map.toTileUrl("wmts" /* MapOptionType.Wmts */, GoogleTms, undefined, undefined, undefined, Config.map.filter.date);
            const googleXyzTileUrl = Config.map.toTileUrl("raster" /* MapOptionType.TileRaster */, GoogleTms);
            children.push(_jsx(Copyable, { header: "WMTS: WebMercatorQuad", value: googleTileUrl }, "WebMercatorQuad"));
            children.push(_jsx(Copyable, { header: "XYZ", value: googleXyzTileUrl }, "XYZ"));
        }
        return _jsx(Fragment, { children: children });
    }
}
//# sourceMappingURL=layout.header.js.map