import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
import { idpElementStyles } from './tokens.js';
import './idp-button.js';
import type { TIdpButtonSize, TIdpButtonVariant } from './idp-button.js';

declare global {
  interface HTMLElementTagNameMap {
    'idp-form-submit': IdpFormSubmit;
  }
}

@customElement('idp-form-submit')
export class IdpFormSubmit extends DeesElement {
  public static demo = () => html`<idp-form-submit>Continue</idp-form-submit>`;
  public static demoGroups = ['idp.global v3 primitives'];

  @property({ type: String })
  public accessor text = '';

  @property({ type: String })
  public accessor variant: TIdpButtonVariant = 'accent';

  @property({ type: String })
  public accessor size: TIdpButtonSize = 'md';

  @property({ type: Boolean, reflect: true })
  public accessor disabled = false;

  @property({ type: Boolean, reflect: true })
  public accessor loading = false;

  public static styles = [
    ...idpElementStyles,
    css`
      :host {
        display: block;
      }
      idp-button {
        width: 100%;
      }
    `,
  ];

  private handleClick() {
    if (this.disabled || this.loading) {
      return;
    }
    this.dispatchEvent(new CustomEvent('idp-form-submit-request', {
      bubbles: true,
      composed: true,
    }));
  }

  public render(): TemplateResult {
    return html`
      <idp-button
        variant=${this.variant}
        size=${this.size}
        .disabled=${this.disabled || this.loading}
        .loading=${this.loading}
        @click=${this.handleClick}
      >${this.text || html`<slot></slot>`}</idp-button>
    `;
  }
}