import { html, TemplateResult } from 'lit';
import { IRequestAuthorization, RequestAuthorization } from '@api-client/core/build/browser.js';
import { reactive } from '../../../src/lib/decorators.js';
import { DemoPage } from '../../../src/pages/demo/DemoPage.js';
import { Authorization } from '../../../src/elements/authorization/ui/Authorization.js';
import '../../../src/define/authorization/ntlm-authorization.js';


class ComponentDemoPage extends DemoPage {
  componentName = 'NTLM authorization';

  @reactive() authorization: IRequestAuthorization;

  constructor() {
    super();
    const auth = RequestAuthorization.fromTypedConfig('ntlm', {}, false);
    this.authorization = auth.toJSON();
  }

  handleChange(e: Event): void {
    const input = e.target as Authorization;
    console.log('Value changed', input.authorization);
  }

  handleDelete(): void {
    console.log('Requested to delete.');
  }

  contentTemplate(): TemplateResult {
    return html`
    <a href="./">Back</a>
    <section class="demo-section">
      <ntlm-authorization .authorization="${this.authorization}" @change="${this.handleChange}" @delete="${this.handleDelete}"></ntlm-authorization>
    </section>
    `;
  }
}

const instance = new ComponentDemoPage();
instance.render();
