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

import '@tp/tp-dialog/tp-dialog.js';
import '@tp/tp-form/tp-form.js';
import '@tp/tp-input/tp-input.js';
import '@tp/tp-button/tp-button.js';
import { LitElement, html, css } from 'lit';

export class TpRtbLinkDialog extends LitElement {
  static get styles() {
    return css`
      :host {
        display: contents;
      }

      tp-dialog::part(dialog) {
        width: min(420px, calc(100vw - 32px));
      }

      .wrap {
        min-width: 300px;
      }

      h3 {
        margin: 0 0 18px 0;
        padding-right: 20px;
      }

      tp-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      label {
        display: block;
        margin: 0 0 4px 0;
        color: var(--tp-rtb-link-dialog-label-color, #666666);
      }

      .buttons-justified {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20px;
      }
    `;
  }

  render() {
    return html`
      <tp-dialog closeOnEsc showClose>
        <div class="wrap">
          <h3>${this.dialogTitle}</h3>

          <tp-form @submit=${this._submit}>
            <div>
              <label>${this.urlLabel}</label>
              <tp-input name="url" .value=${this.url} required .errorMessage=${this.requiredMessage}>
                <input type="text" placeholder=${this.urlPlaceholder}>
              </tp-input>
            </div>

            <div>
              <label>${this.textLabel}</label>
              <tp-input name="text" .value=${this.text}>
                <input type="text" placeholder=${this.textPlaceholder}>
              </tp-input>
            </div>

            <div class="buttons-justified">
              <tp-button dialog-dismiss>${this.cancelLabel}</tp-button>
              <tp-button submit primary>${this.saveLabel}</tp-button>
            </div>
          </tp-form>
        </div>
      </tp-dialog>
    `;
  }

  static get properties() {
    return {
      url: { type: String },
      text: { type: String },
      dialogTitle: { type: String },
      urlLabel: { type: String },
      textLabel: { type: String },
      urlPlaceholder: { type: String },
      textPlaceholder: { type: String },
      requiredMessage: { type: String },
      cancelLabel: { type: String },
      saveLabel: { type: String }
    };
  }

  constructor() {
    super();

    this.url = '';
    this.text = '';
    this.dialogTitle = 'Add Link';
    this.urlLabel = 'URL';
    this.textLabel = 'Text';
    this.urlPlaceholder = 'https://example.com';
    this.textPlaceholder = '';
    this.requiredMessage = 'Required';
    this.cancelLabel = 'Cancel';
    this.saveLabel = 'Save';
  }

  async show({ url = '', text = '' } = {}) {
    this.url = url;
    this.text = text;

    await this.updateComplete;

    return this._dialog.show();
  }

  close() {
    this._dialog.close();
  }

  get _dialog() {
    return this.shadowRoot.querySelector('tp-dialog');
  }

  _submit(e) {
    const event = new CustomEvent('link-save', {
      detail: e.detail,
      bubbles: true,
      composed: true,
      cancelable: true
    });

    if (this.dispatchEvent(event)) {
      this.close();
    }
  }
}

customElements.define('tp-rtb-link-dialog', TpRtbLinkDialog);