// The MIT License (MIT)
//
// Copyright (c) 2021-2024 Camptocamp SA
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
// the Software without restriction, including without limitation the rights to
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
// the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import BaseElement from 'gmfapi/elements/BaseElement';
import { css, html } from 'lit';
import { state, property, customElement } from 'lit/decorators.js';
import panels from 'gmfapi/store/panels';
import 'jquery';
import 'bootstrap/js/src/tooltip';
/**
 * Base element of the application tools icon.
 *
 * Example:
 * ```js
 *    import {html, css} from 'lit';
 *    import {customElement} from 'lit/decorators.js';
 *
 *    // @ts-ignore
 *    @customElement('my-button')
 *    export class MyToolButtonElement extends (window as any).gmfapi.elements.ToolButtonElement {
 *      constructor() {
 *        super(panelName);
 *      }
 *
 *      render(): TemplateResult {
 *        return html`
 *          <button
 *            @click=${() => this.click_()}
 *            class="btn btn-default ${this.active_ ? 'active' : ''}"
 *            data-toggle="tooltip"
 *            data-placement="left"
 *            data-original-title="${i18next.t('Title')}"
 *          >
 *            <span class="fa-solid fa-my-icon"></span>
 *          </button>
 *        `;
 *      }
 *    }
 * ```
 */
export default class ToolButtonElement extends BaseElement {
    static { this.styles = [
        ...BaseElement.styles,
        css `
      button.btn {
        margin: 0;
        margin-top: -1px;
        width: 2rem;
        height: 2rem;
        display: inline-block;
        font-weight: 400;
        color: #212529;
        text-align: center;
        vertical-align: middle;
        user-select: none;
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
        line-height: 1.5;
        border-radius: 0;
        transition:
          color 0.15s ease-in-out,
          background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out,
          box-shadow 0.15s ease-in-out;
        background-color: var(--brand-primary);
        border-radius: 0;
        border: var(--border);
        border-color: var(--border-color);
        border-right-width: 0;
        border-left-width: 0;
      }
      button.btn:focus {
        box-shadow: unset;
      }
      button:hover {
        background-color: var(--hover-background-color);
      }

      button.active,
      button:active {
        box-shadow: none;
      }
      button.active {
        background-color: var(--brand-secondary);
        border-left: 0.06rem solid;
        border-left-color: var(--brand-secondary);
        margin-left: -0.06rem;
      }
    `,
    ]; }
    constructor(panelName) {
        super();
        this.active_ = false;
        this.title_ = false;
        this.subscriptions = [];
        this.panelName_ = panelName;
    }
    connectedCallback() {
        super.connectedCallback();
        this.subscriptions.push(panels.getActiveToolPanel().subscribe({
            next: (panel) => {
                this.active_ = panel && panel == this.panelName_;
            },
        }));
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    activePanels_(panels) { }
    click_() {
        panels.openToolPanel(this.panelName_);
    }
    render() {
        return html `
      <button
        @click=${() => this.click_()}
        class="btn btn-default ${this.active_ ? 'active' : ''}"
        data-toggle="tooltip"
        data-placement="left"
        data-original-title="${this.title_}"
      >
        <slot></slot>
      </button>
    `;
    }
    firstUpdated() {
        $(this.shadowRoot.querySelectorAll("[data-toggle='tooltip']")).tooltip();
    }
}
__decorate([
    state()
], ToolButtonElement.prototype, "active_", void 0);
__decorate([
    state()
], ToolButtonElement.prototype, "title_", void 0);
/**
 * Default implementation of the application tools icon.
 *
 * Example with an icon classes:
 * ```js
 *    <gmf-tool-button slot="tool-button" iconClasses="fa-solid fa-print" panelName="my-panel"></gmf-tool-button>
 * ```
 *
 * Example with a slot:
 * ```js
 *    <gmf-tool-button slot="tool-button" panelName="my-panel">
 *      <span>
 *        <i class="fa-solid fa-arrow-pointer"></i>
 *      </span>
 *    </gmf-tool-button>
 * ```
 */
let ToolButtonDefault = class ToolButtonDefault extends ToolButtonElement {
    connectedCallback() {
        super.connectedCallback();
        this.panelName_ = this.panelName;
    }
    render() {
        return html `
      <button
        @click=${() => this.click_()}
        class="btn btn-default ${this.active_ ? 'active' : ''}"
        data-toggle="tooltip"
        data-placement="left"
        data-original-title="${this.title}"
      >
        ${this.iconClasses ? html `<span class="${this.iconClasses}"></span>` : html `<slot></slot>`}
      </button>
    `;
    }
};
__decorate([
    property({ type: String })
], ToolButtonDefault.prototype, "panelName", void 0);
__decorate([
    property({ type: String })
], ToolButtonDefault.prototype, "title", void 0);
__decorate([
    property({ type: String })
], ToolButtonDefault.prototype, "iconClasses", void 0);
ToolButtonDefault = __decorate([
    customElement('gmf-tool-button')
], ToolButtonDefault);
export { ToolButtonDefault };
//# sourceMappingURL=ToolButtonElement.js.map