import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { Component } from 'preact';
import clsx from 'clsx';
import { Config, gaEvent } from '../config.js';
export class Copyable extends Component {
    constructor() {
        super(...arguments);
        this._copyTimeout = null;
        this.copy = () => {
            /**
             * Create a readablish name for the copy event
             * @example `copy:topographic::basic:tilejson`
             * @example `copy:aerial:wmts:nztm2000quad`
             */
            gaEvent("Ui" /* Ui */, 'copy:' + Config.map.layerKey + ':' + this.props.header.replace(/ /g, '').toLowerCase());
            navigator.clipboard.writeText(this.props.value);
            this.setState({ copied: true });
            if (this._copyTimeout != null)
                clearTimeout(this._copyTimeout);
            this._copyTimeout = setTimeout(() => this.setState({ copied: false }), 1000);
        };
    }
    render() {
        return (_jsxs("div", { class: "LuiDeprecatedForms", children: [_jsx("label", { children: this.props.header }), _jsxs("div", { class: clsx({ 'lui-menu-label': true, 'menu-copyable': true, 'menu-copyable-copied': this.state.copied }), children: [_jsx("button", { class: "menu-copyable-icon-button", title: "Copy", onClick: this.copy, children: _jsx("i", { class: "material-icons-round", children: this.state.copied ? 'check' : 'content_copy' }) }), _jsx("input", { value: this.props.value, readonly: true })] })] }));
    }
}
//# sourceMappingURL=copyable.js.map