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