import { customElement, html, DeesElement, css, cssManager } 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 {
  constructor() {
    super();
  }

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

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

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