// Copyright 2026 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.js';
import 'chrome://resources/cr_elements/cr_button/cr_button.js';
import 'chrome://resources/cr_elements/cr_icon/cr_icon.js';
import 'chrome://resources/cr_elements/cr_tooltip/cr_tooltip.js';
import '//resources/cr_elements/cr_icon_button/cr_icon_button.js';
import '//resources/cr_elements/icons.html.js';
import '//resources/cr_elements/cr_auto_img/cr_auto_img.js';
import './icons.html.js';
import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js';
import { loadTimeData } from 'chrome://resources/js/load_time_data.js';
import { getCss } from './card.css.js';
import { getHtml } from './card.html.js';
import { SkillsDialogType, SkillSource } from './skill.mojom-webui.js';
import { SkillsManagementAction, SkillsManagementPage } from './skill_metrics.mojom-webui.js';
import { SkillsPageBrowserProxy } from './skills_page_browser_proxy.js';
const GSTATIC_HOSTS = ['www.gstatic.com', 'gstatic.com'];
const ILLUSTRATION_WIDTH = 238;
const ILLUSTRATION_HEIGHT = 119;
export var CardType;
(function (CardType) {
    CardType["USER_SKILL_CARD"] = "user-skill-card";
    CardType["DISCOVER_SKILL_CARD"] = "discover-skill-card";
})(CardType || (CardType = {}));
export class SkillCardElement extends CrLitElement {
    static get is() {
        return 'skill-card';
    }
    static get styles() {
        return getCss();
    }
    render() {
        return getHtml.bind(this)();
    }
    static get properties() {
        return {
            skill: { type: Object },
            cardType: { type: String },
            saveDisabled: { type: Boolean },
            hideTooltip: { type: Boolean },
        };
    }
    #skill_accessor_storage = {
        id: '',
        sourceSkillId: '',
        name: '',
        icon: '',
        prompt: '',
        // Default to user created since these are added by the user via the UI.
        source: SkillSource.kUserCreated,
        description: '',
        curatedBy: '',
        imageUrl: '',
        creationTime: { internalValue: 0n },
        lastUpdateTime: { internalValue: 0n },
    };
    get skill() { return this.#skill_accessor_storage; }
    set skill(value) { this.#skill_accessor_storage = value; }
    #cardType_accessor_storage = CardType.USER_SKILL_CARD;
    get cardType() { return this.#cardType_accessor_storage; }
    set cardType(value) { this.#cardType_accessor_storage = value; }
    #saveDisabled_accessor_storage = false;
    get saveDisabled() { return this.#saveDisabled_accessor_storage; }
    set saveDisabled(value) { this.#saveDisabled_accessor_storage = value; }
    #hideTooltip_accessor_storage = false;
    get hideTooltip() { return this.#hideTooltip_accessor_storage; }
    set hideTooltip(value) { this.#hideTooltip_accessor_storage = value; }
    proxy_ = SkillsPageBrowserProxy.getInstance();
    ariaLabelForSkill_(prefix) {
        return loadTimeData.getString(prefix) + ' ' + this.skill.name;
    }
    isDiscoverCard_() {
        return this.cardType === CardType.DISCOVER_SKILL_CARD;
    }
    getCardBodyText_() {
        return this.isDiscoverCard_() ? this.skill.description : this.skill.prompt;
    }
    getIllustrationUrl_() {
        const urlString = this.skill.imageUrl;
        if (!urlString) {
            return '';
        }
        try {
            const url = new URL(urlString);
            if (url.protocol === 'https:' && GSTATIC_HOSTS.includes(url.hostname)) {
                const dpr = window.devicePixelRatio || 1;
                const width = Math.round(ILLUSTRATION_WIDTH * dpr);
                const height = Math.round(ILLUSTRATION_HEIGHT * dpr);
                return `${urlString}=w${width}-h${height}-rw`;
            }
        }
        catch (_) {
            // Invalid URL, ignore and return original.
        }
        return urlString;
    }
    onEditButtonClick_() {
        this.proxy_.handler.openSkillsDialog(SkillsDialogType.kEdit, this.skill);
        this.logCardAction_(SkillsManagementAction.kClickedEditSkill);
    }
    onSaveButtonClick_() {
        this.fire('save-button-click', this.skill);
    }
    onMoreButtonClick_(event) {
        this.$.menu.showAt(event.target);
    }
    onCopyButtonClick_() {
        // TODO: b/481441891 - Add toast/snackbar to let user know copy was
        // successful.
        navigator.clipboard.writeText(this.skill.prompt);
        this.logCardAction_(SkillsManagementAction.kClickedCopyInstructions);
        this.$.menu.close();
    }
    onDeleteButtonClick_() {
        this.logCardAction_(SkillsManagementAction.kClickedDeleteSkill);
        this.proxy_.handler.deleteSkill(this.skill.id);
        this.$.menu.close();
    }
    logCardAction_(action) {
        this.proxy_.handler.recordSkillsManagementAction(this.cardType === CardType.USER_SKILL_CARD ?
            SkillsManagementPage.kYourSkills :
            SkillsManagementPage.kBrowseSkills, action);
    }
}
customElements.define(SkillCardElement.is, SkillCardElement);
