/**
@license
Copyright (c) 2025 trading_peter
This program is available under Apache License Version 2.0
*/

import '@tp/tp-timeout-strip/tp-timeout-strip.js';
import { LitElement, html, css } from 'lit';

class TpFlowNodePort extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: block;
          position: relative;
        }

        .connectionPoint {
          width: 12px;
          height: 12px;
          background: #666;
          border-radius: 50%;
          cursor: pointer;
        }

        .connectionPoint:hover {
          background: #888;
        }

        .tag {
          position: absolute;
          background: #888;
          visibility: hidden;
          pointer-events: none;
        }

        :host([portType="input"]) .tag {
          left: 0;
          top: 0;
          transform: translateX(calc(-100% - 10px));
        }

        :host([portType="output"]) .tag {
          right: 0;
          top: 0;
          transform: translateX(calc(100% + 10px));
        }

        :host(:hover) .tag,
        .tag[visible] {
          visibility: visible;
          pointer-events: all;
        }
      `
    ];
  }

  render() {
    const { showTag, errorMsg, tagContent } = this;

    return html`
      <div class="connectionPoint" part="connection-point"></div>
      
      ${showTag || Boolean(tagContent) ? html`
        <div class="tag" ?visible=${showTag} part="tag">
          ${errorMsg ? html`
            <div part="tag-error">
              ${errorMsg}
            </div>
            ` : null}
          ${tagContent ? html`
            <div class="tag-content" part="tag-content">${tagContent}</div>
          ` : null}
          <tp-timeout-strip part="tag-timeout" @timeout=${this._onTimeout}></tp-timeout-strip>
        </div>
        ` : null}
    `;
  }

  static get properties() {
    return {
      portType: { type: String, reflect: true },
      portId: { type: Number, reflect: true },
      portName: { type: String },
      tagContent: { type: String },
      errorMsg: { type: String },
      showTag: { type: Boolean },
    };
  }

  showConnectionError(msg, timeout = 0) {
    this.errorMsg = msg;
    this.showTag = true;

    if (timeout > 0) {
      this.updateComplete.then(() => {
        this.shadowRoot.querySelector('tp-timeout-strip').show(timeout);
      });
    }
  }

  _onTimeout() {
    this.showTag = false;
    this.errorMsg = null;
  }
}

window.customElements.define('tp-flow-node-port', TpFlowNodePort);