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;
};
// Lit
import { LitElement, html, css } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js';
import { ref, createRef } from 'lit/directives/ref.js';
// Utilities
import { computePopupStyle } from '../utilities/utilities';
// Styles
import { backgroundAnimation, underlineAnimation } from '../styles/animation';
import { popupStyle } from '../styles/popup';
// Default values
import { DEFAULT_PLACEHOLDER_CONFIG, DEFAULT_POPUP_STYLE, } from '../constants/defaultValues';
// Components
import './knob';
export class AnnotativePlaceholder extends LitElement {
    constructor() {
        super(...arguments);
        this.placeholderRef = createRef();
        this.popupRef = createRef();
        this._showPopup = false;
        this._popupStyle = {};
        this.key = '';
        this.config = DEFAULT_PLACEHOLDER_CONFIG;
        this.isBgLight = true;
        this.onChange = () => { };
        this.popupStyle = DEFAULT_POPUP_STYLE;
        this.renderPopup = ({ html, key, config, isBgLight, popupStyle = this.popupStyle, }) => {
            const { type, title, description, isEditable, renderDescription } = config;
            return html `<div>
      <div class="">
        <span>${type}</span>
        <span style="color: ${popupStyle.textColor}">${title ?? key}</span>
      </div>
      <div style="color: ${popupStyle.textColor}">
        ${description || isEditable
                ? html `<hr
              class="popup-line-break"
              style="border-color: ${popupStyle.textColor}"
            />`
                : ''}
        <annotative-knob
          .key=${key}
          .config=${config}
          .popupStyle=${popupStyle}
          .onChange=${this.onChange}
        ></annotative-knob>
        <div class="popup-description">${renderDescription
                ? renderDescription({
                    html,
                    key,
                    config,
                    isBgLight,
                    popupStyle,
                })
                : description
                    ? html `${description}`
                    : ''}</div>
      </div>
    </div>`;
        };
    }
    async _togglePopup() {
        const placeholderElement = this.placeholderRef;
        if (!placeholderElement.value) {
            return;
        }
        if (this._showPopup) {
            this._showPopup = false;
            placeholderElement.value.offsetParent.style.zIndex =
                '100';
            return;
        }
        const { style } = computePopupStyle(placeholderElement.value);
        this._showPopup = true;
        this._popupStyle = style;
        placeholderElement.value.offsetParent.style.zIndex = '110';
    }
    render() {
        const config = { ...DEFAULT_PLACEHOLDER_CONFIG, ...this.config };
        const { animation, value, formatValue, renderPopup = this.renderPopup, } = config;
        return html `<div
      ${ref(this.placeholderRef)}
      id="placeholder"
      class=${classMap({
            ...(animation ? { [animation]: true } : null),
        })}
      @mouseover=${this._togglePopup}
      @mouseout=${this._togglePopup}
    >
      <div>${formatValue ? formatValue(value) : value}</div>
      <div
        id="popup"
        ${ref(this.popupRef)}
        class=${classMap({ 'fade-in': this._showPopup })}
        style=${styleMap(this._popupStyle)}
      >
        <div
          id="popup-inner"
          style=${styleMap({
            'color-scheme': this.isBgLight ? 'dark' : 'light',
            'background-color': this.popupStyle.backgroundColor,
            border: `1px solid ${this.popupStyle.borderColor}`,
        })}
        >
          ${renderPopup({
            html,
            key: this.key,
            config,
            isBgLight: this.isBgLight,
            popupStyle: this.popupStyle,
        })}
        </div>
      </div>
    </div>`;
    }
}
AnnotativePlaceholder.styles = [
    backgroundAnimation,
    underlineAnimation,
    popupStyle,
    css `
      :host {
        position: relative;
        display: inline-block;
        vertical-align: top;
        white-space: initial;
        cursor: pointer;
        z-index: 100;
        overflow: visible;
      }
      #placeholder {
        position: relative;
        display: inline-block;
        vertical-align: top;
        padding: 0px 4px;
      }
      div.background {
        border-radius: 4px;
        animation: background-animation 1s infinite alternate-reverse;
      }
      div.underline {
        animation: underline-animation 1s infinite alternate-reverse;
      }
    `,
];
__decorate([
    property({ state: true })
], AnnotativePlaceholder.prototype, "_showPopup", void 0);
__decorate([
    property({ state: true })
], AnnotativePlaceholder.prototype, "_popupStyle", void 0);
__decorate([
    property({ attribute: 'key' })
], AnnotativePlaceholder.prototype, "key", void 0);
__decorate([
    property({ attribute: 'config' })
], AnnotativePlaceholder.prototype, "config", void 0);
__decorate([
    property({ attribute: 'isBgLight' })
], AnnotativePlaceholder.prototype, "isBgLight", void 0);
__decorate([
    property({ attribute: 'onChange' })
], AnnotativePlaceholder.prototype, "onChange", void 0);
__decorate([
    property({ attribute: 'popupStyle' })
], AnnotativePlaceholder.prototype, "popupStyle", void 0);
__decorate([
    property({ attribute: 'renderPopup' })
], AnnotativePlaceholder.prototype, "renderPopup", void 0);
customElements.get('annotative-placeholder') ||
    customElements.define('annotative-placeholder', AnnotativePlaceholder);
//# sourceMappingURL=placeholder.js.map