// Copyright 2025 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import '//resources/cr_elements/cr_icon_button/cr_icon_button.js';
import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js';
import { TabStripUIController } from '/tab_strip_api/tab_strip_ui_controller.mojom-webui.js';
import { TabNetworkState } from '../tabs.mojom-webui.js';
import { getCss } from './tab.css.js';
import { getHtml } from './tab.html.js';
export class TabElement extends CrLitElement {
    static get is() {
        return 'webui-browser-tab';
    }
    static get styles() {
        return getCss();
    }
    render() {
        return getHtml.bind(this)();
    }
    static get properties() {
        return {
            tabData: { type: Object },
            dragInProgress: {
                type: Boolean,
                reflect: true,
            },
            active: {
                type: Boolean,
                reflect: true,
            },
            inactiveFrame: {
                type: Boolean,
                reflect: true,
                attribute: 'inactive-frame',
            },
        };
    }
    #tabData_accessor_storage = {
        alertStates: [],
        favicon: { dataUrl: 'chrome://favicon2/' },
        id: '',
        isActive: false,
        isBlocked: false,
        isSelected: false,
        networkState: TabNetworkState.kNone,
        title: '',
        url: '',
    };
    get tabData() { return this.#tabData_accessor_storage; }
    set tabData(value) { this.#tabData_accessor_storage = value; }
    #dragInProgress_accessor_storage = false;
    get dragInProgress() { return this.#dragInProgress_accessor_storage; }
    set dragInProgress(value) { this.#dragInProgress_accessor_storage = value; }
    #active_accessor_storage = false;
    get active() { return this.#active_accessor_storage; }
    set active(value) { this.#active_accessor_storage = value; }
    #inactiveFrame_accessor_storage = false;
    get inactiveFrame() { return this.#inactiveFrame_accessor_storage; }
    set inactiveFrame(value) { this.#inactiveFrame_accessor_storage = value; }
    tabStripUiController_;
    constructor() {
        super();
        this.tabStripUiController_ = TabStripUIController.getRemote();
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('contextmenu', this.onContextMenu_.bind(this));
    }
    onContextMenu_(e) {
        e.stopPropagation();
        e.preventDefault();
        this.tabStripUiController_.showTabContextMenu(this.tabData.id, {
            x: e.screenX,
            y: e.screenY,
        });
    }
    willUpdate(changedProperties) {
        super.willUpdate(changedProperties);
        if (changedProperties.has('tabData')) {
            this.active = this.tabData.isActive;
        }
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        if (changedProperties.has('tabData')) {
            if (this.tabData.favicon.dataUrl) {
                this.style.setProperty('--favicon-url', `url(${this.tabData.favicon.dataUrl})`);
            }
            this.style.setProperty('z-index', this.tabData.isActive ? '1' : '0');
        }
    }
    // Calculating the dom matrix value could be expensive.
    // This potentially could just be stored in the Tab and then updated manually
    // by the tabstrip during animation.
    getTransformX() {
        const matrix = new DOMMatrixReadOnly(this.style.transform);
        return matrix.m41;
    }
    onCloseClick() {
        this.fire('tab-close-click', { id: this.tabData.id });
    }
}
customElements.define(TabElement.is, TabElement);
