var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
    var _, done = false;
    for (var i = decorators.length - 1; i >= 0; i--) {
        var context = {};
        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
        if (kind === "accessor") {
            if (result === void 0) continue;
            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
            if (_ = accept(result.get)) descriptor.get = _;
            if (_ = accept(result.set)) descriptor.set = _;
            if (_ = accept(result.init)) initializers.unshift(_);
        }
        else if (_ = accept(result)) {
            if (kind === "field") initializers.unshift(_);
            else descriptor[key] = _;
        }
    }
    if (target) Object.defineProperty(target, contextIn.name, descriptor);
    done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
    var useValue = arguments.length > 2;
    for (var i = 0; i < initializers.length; i++) {
        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
    }
    return useValue ? value : void 0;
};
import { DeesElement, customElement, html, css, property } from '@design.estate/dees-element';
let WccRecordButton = (() => {
    let _classDecorators = [customElement('wcc-record-button')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = DeesElement;
    let _state_decorators;
    let _state_initializers = [];
    let _state_extraInitializers = [];
    let _duration_decorators;
    let _duration_initializers = [];
    let _duration_extraInitializers = [];
    var WccRecordButton = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _state_decorators = [property({ type: String })];
            _duration_decorators = [property({ type: Number })];
            __esDecorate(this, null, _state_decorators, { kind: "accessor", name: "state", static: false, private: false, access: { has: obj => "state" in obj, get: obj => obj.state, set: (obj, value) => { obj.state = value; } }, metadata: _metadata }, _state_initializers, _state_extraInitializers);
            __esDecorate(this, null, _duration_decorators, { kind: "accessor", name: "duration", static: false, private: false, access: { has: obj => "duration" in obj, get: obj => obj.duration, set: (obj, value) => { obj.duration = value; } }, metadata: _metadata }, _duration_initializers, _duration_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            WccRecordButton = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #state_accessor_storage = __runInitializers(this, _state_initializers, 'idle');
        get state() { return this.#state_accessor_storage; }
        set state(value) { this.#state_accessor_storage = value; }
        #duration_accessor_storage = (__runInitializers(this, _state_extraInitializers), __runInitializers(this, _duration_initializers, 0));
        get duration() { return this.#duration_accessor_storage; }
        set duration(value) { this.#duration_accessor_storage = value; }
        static styles = [
            css `
      :host {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        cursor: pointer;
        transition: all 0.15s ease;
        color: #666;
        user-select: none;
      }

      :host(:hover) {
        background: rgba(239, 68, 68, 0.05);
        color: #f87171;
      }

      :host(.recording) {
        background: rgba(239, 68, 68, 0.15);
        color: #f87171;
      }

      .content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
      }

      .rec-icon {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: currentColor;
      }

      :host(.recording) .rec-icon {
        animation: pulse-recording 1s ease-in-out infinite;
      }

      @keyframes pulse-recording {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(0.9); }
      }

      .recording-timer {
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.7rem;
      }
    `
        ];
        formatDuration(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }
        render() {
            return html `
      <div class="content">
        <div class="rec-icon"></div>
        ${this.state === 'recording' ? html `
          <span class="recording-timer">${this.formatDuration(this.duration)}</span>
        ` : null}
      </div>
    `;
        }
        async connectedCallback() {
            await super.connectedCallback();
            this.addEventListener('click', this.handleClick);
        }
        async disconnectedCallback() {
            await super.disconnectedCallback();
            this.removeEventListener('click', this.handleClick);
        }
        handleClick = (__runInitializers(this, _duration_extraInitializers), () => {
            this.dispatchEvent(new CustomEvent('record-click', {
                bubbles: true,
                composed: true
            }));
        });
        updated(changedProperties) {
            super.updated(changedProperties);
            if (changedProperties.has('state')) {
                if (this.state === 'recording') {
                    this.classList.add('recording');
                }
                else {
                    this.classList.remove('recording');
                }
            }
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return WccRecordButton = _classThis;
})();
export { WccRecordButton };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLXJlY29yZC1idXR0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvd2NjLXJlY29yZC1idXR0b24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsYUFBYSxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsUUFBUSxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0lBR3RHLGVBQWU7NEJBRDNCLGFBQWEsQ0FBQyxtQkFBbUIsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7OytCQUFuQixTQUFRLFdBQVc7Ozs7aUNBQzdDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztvQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO1lBRjNCLG9LQUFTLEtBQUssNkJBQUwsS0FBSyxxRkFBZ0M7WUFHOUMsNktBQVMsUUFBUSw2QkFBUixRQUFRLDJGQUFhO1lBTGhDLDZLQXdHQzs7OztRQXRHQyx1RUFBdUMsTUFBTSxFQUFDO1FBQTlDLElBQVMsS0FBSywyQ0FBZ0M7UUFBOUMsSUFBUyxLQUFLLGlEQUFnQztRQUc5QyxpSUFBNEIsQ0FBQyxHQUFDO1FBQTlCLElBQVMsUUFBUSw4Q0FBYTtRQUE5QixJQUFTLFFBQVEsb0RBQWE7UUFFdkIsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0FpREY7U0FDRixDQUFDO1FBRU0sY0FBYyxDQUFDLE9BQWU7WUFDcEMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFDLENBQUM7WUFDdEMsTUFBTSxJQUFJLEdBQUcsT0FBTyxHQUFHLEVBQUUsQ0FBQztZQUMxQixPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEVBQUUsR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEVBQUUsR0FBRyxDQUFDLEVBQUUsQ0FBQztRQUNuRixDQUFDO1FBRU0sTUFBTTtZQUNYLE9BQU8sSUFBSSxDQUFBOzs7VUFHTCxJQUFJLENBQUMsS0FBSyxLQUFLLFdBQVcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBOzBDQUNELElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztTQUNuRSxDQUFDLENBQUMsQ0FBQyxJQUFJOztLQUVYLENBQUM7UUFDSixDQUFDO1FBRUQsS0FBSyxDQUFDLGlCQUFpQjtZQUNyQixNQUFNLEtBQUssQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1lBQ2hDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ25ELENBQUM7UUFFRCxLQUFLLENBQUMsb0JBQW9CO1lBQ3hCLE1BQU0sS0FBSyxDQUFDLG9CQUFvQixFQUFFLENBQUM7WUFDbkMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDdEQsQ0FBQztRQUVPLFdBQVcsMERBQUcsR0FBUyxFQUFFO1lBQy9CLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxXQUFXLENBQUMsY0FBYyxFQUFFO2dCQUNqRCxPQUFPLEVBQUUsSUFBSTtnQkFDYixRQUFRLEVBQUUsSUFBSTthQUNmLENBQUMsQ0FBQyxDQUFDO1FBQ04sQ0FBQyxFQUFDO1FBRUYsT0FBTyxDQUFDLGlCQUF1QztZQUM3QyxLQUFLLENBQUMsT0FBTyxDQUFDLGlCQUFpQixDQUFDLENBQUM7WUFDakMsSUFBSSxpQkFBaUIsQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQztnQkFDbkMsSUFBSSxJQUFJLENBQUMsS0FBSyxLQUFLLFdBQVcsRUFBRSxDQUFDO29CQUMvQixJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxXQUFXLENBQUMsQ0FBQztnQkFDbEMsQ0FBQztxQkFBTSxDQUFDO29CQUNOLElBQUksQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDO2dCQUNyQyxDQUFDO1lBQ0gsQ0FBQztRQUNILENBQUM7O1lBdkdVLHVEQUFlOzs7OztTQUFmLGVBQWUifQ==