import { customElement, html, DeesElement, css, cssManager, property } from '@designestate/dees-element';
import { DeesForm } from './dees-form';

declare global {
  interface HTMLElementTagNameMap {
    'dees-form-submit': DeesFormSubmit;
  }
}

@customElement('dees-form-submit')
export class DeesFormSubmit extends DeesElement {
  public static demo = () => html`<dees-form-submit></dees-form-submit>`;

  @property({
    type: Boolean
  })
  public disabled = false;

  constructor() {
    super();
  }

  public static styles = [cssManager.defaultStyles, css``];

  public render() {
    return html`<dees-button @click="${this.submit}" .disabled="${this.disabled}">${this.textContent}</dees-button> `;
  }

  public async submit() {
    if(this.disabled) {
      return;
    }
    const parentElement: DeesForm = this.parentElement as DeesForm;
    parentElement.gatherAndDispatch();
  }
}