import {
  customElement,
  html,
  DeesElement,
  property,
  type TemplateResult,
  cssManager,
  css,
  unsafeCSS,
  type CSSResult,
  state,
} from '@design.estate/dees-element';

declare global {
  interface HTMLElementTagNameMap {
    'dees-simple-login': DeesSimpleLogin;
  }
}

@customElement('dees-simple-login')
export class DeesSimpleLogin extends DeesElement {
  // STATIC
  public static demo = () => html` <dees-simple-login></dees-simple-login> `;

  // INSTANCE

  @property()
  public title = 'Dees Simple Login';

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        color: ${cssManager.bdTheme('#333', '#fff')};
        user-select: none;
      }
      .loginContainer {
        display: flex;
        justify-content: center; /* aligns horizontally */
        align-items: center; /* aligns vertically */
        height: 100%;
      }
      .login {
        min-width: 320px;
        min-height: 100px;
        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
        box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
        border-radius: 3px;
        padding: 24px;
      }

      .header {
        text-align: center;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="loginContainer">
        <div class="login">
          <dees-form>
            <div class="header">Login to ${this.title}</div>
            <dees-input-text key="username" label="username" required></dees-input-text>
            <dees-input-text key="password" label="password" isPasswordBool required></dees-input-text>
            <dees-form-submit disabled>login</dees-form-submit>
          </dees-form>
        </div>
      </div>
      <slot></slot>
    `;
  }

  public async firstUpdated(_changedProperties): Promise<void> {
    const domtools = await this.domtoolsPromise;
    super.firstUpdated(_changedProperties);
    const form = this.shadowRoot.querySelector('dees-form');
    await form.readyDeferred.promise;
    const username = this.shadowRoot.querySelector('dees-input-text[label="username"]');
    const password = this.shadowRoot.querySelector('dees-input-text[label="password"]');
    const submit = this.shadowRoot.querySelector('dees-form-submit');
    form.addEventListener('formData', (event: CustomEvent) => {
      this.dispatchEvent(new CustomEvent('login', { detail: event.detail }));
    });
  }
}