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

import { LitElement, html, css } from 'lit';

class TpLcOut extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: flex;
          align-items: center;
        }

        .circle {
          border-radius: 50px;
          border: 3px solid green;
          width: 10px;
          height: 10px;
          cursor: pointer;
        }

        .circle:hover,
        :host([isDragging]) .circle {
          background: green;
        }

        label {
          margin-right: 5px;
        }
      `
    ];
  }

  render() {
    const { name } = this;

    return html`
      <label>${name}</label>
      <div class="circle" @mousedown=${this.startDrag}></div>
    `;
  }

  static get properties() {
    return {
      name: { type: String },
      isDragging: { type: Boolean, reflect: true },
    };
  }

  startDrag(e) {
    this.isDragging = true;
    window.addEventListener('mouseup', () => {
      this.isDragging = false;
    }, { once: true });

    this.dispatchEvent(new CustomEvent('start-drag', { detail: e, bubbles: true, composed: true }));
  }
}

window.customElements.define('tp-lc-out', TpLcOut);