import { html, TemplateResult } from 'lit';
import '../../../../src/define/ui/ui-button.js';
import '../../../../src/define/ui/ui-icon.js';
import { reactive } from '../../../../src/lib/decorators.js';
import ButtonElement from '../../../../src/ui/button/UiButton.js';
import { UiDemoPage } from '../UiDemoPage.js';

class ComponentDemoPage extends UiDemoPage {
  componentName = 'UI button';

  @reactive() formValues?: string;

  _clickHandler(e: Event): void {
    const button = e.target as ButtonElement;
    console.log(`A ${button.type} button was clicked.`);
  }

  _submitHandler(e: SubmitEvent): void {
    e.preventDefault();
    const form = e.target as HTMLFormElement;
    const values = Array.from(new FormData(form)) as string[][];
    
    const serialized = new URLSearchParams(values).toString();
    this.formValues = serialized;
  }

  contentTemplate(): TemplateResult {
    return html`
    <a href="../">Back</a>
    <section class="demo-section">
      <h2 class="title-large">Elevated button</h2>
      <div class="demo-row">
        <ui-button type="elevated" @click="${this._clickHandler}">Elevated button</ui-button>
        <ui-button type="elevated" @click="${this._clickHandler}">
          <ui-icon slot="icon" icon="add"></ui-icon>
          Elevated button
        </ui-button>
  
        <ui-button type="elevated" disabled @click="${this._clickHandler}">Elevated button</ui-button>
        <ui-button type="elevated" disabled @click="${this._clickHandler}" trailingIcon>
          <ui-icon slot="icon" icon="add"></ui-icon>
          <div>Elevated button</div>
        </ui-button>
      </div>
    </section>

    <section class="demo-section">
      <h2 class="title-large">Filled button</h2>
      <div class="demo-row">
        <ui-button @click="${this._clickHandler}">Filled button</ui-button>
        <ui-button @click="${this._clickHandler}" trailingIcon>
          <ui-icon slot="icon" icon="add"></ui-icon>
          Filled button
        </ui-button>
        <ui-button disabled @click="${this._clickHandler}">Filled button</ui-button>
        <ui-button disabled @click="${this._clickHandler}">
          <ui-icon slot="icon" icon="add"></ui-icon>
          Filled button
        </ui-button>
      </div>
    </section>
    
    <section class="demo-section">
      <h2 class="title-large">Filled tonal button</h2>
      <div class="demo-row">
        <ui-button type="tonal" @click="${this._clickHandler}">Tonal button</ui-button>
        <ui-button type="tonal" @click="${this._clickHandler}">
          <ui-icon slot="icon" icon="add"></ui-icon>
          <div>Tonal button</div>
        </ui-button>

        <ui-button type="tonal" disabled @click="${this._clickHandler}">Tonal button</ui-button>
        <ui-button type="tonal" disabled @click="${this._clickHandler}">
          <ui-icon slot="icon" icon="add"></ui-icon>
          Tonal button
        </ui-button>
      </div>
    </section>

    <section class="demo-section">
      <h2 class="title-large">Outlined button</h2>
      <div class="demo-row">
        <ui-button type="outlined" @click="${this._clickHandler}">Outlined button</ui-button>
        <ui-button type="outlined" @click="${this._clickHandler}">
          <ui-icon slot="icon" icon="add"></ui-icon>
          <div>Outlined button</div>
        </ui-button>

        <ui-button type="outlined" disabled @click="${this._clickHandler}">Outlined button</ui-button>
        <ui-button type="outlined" disabled @click="${this._clickHandler}">
          <ui-icon slot="icon" icon="add"></ui-icon>
          Outlined button
        </ui-button>
      </div>
    </section>

    <section class="demo-section">
      <h2 class="title-large">Text button</h2>
      <div class="demo-row">
        <ui-button type="text" @click="${this._clickHandler}">Text button</ui-button>
        <ui-button type="text" @click="${this._clickHandler}">
          <ui-icon slot="icon" icon="add"></ui-icon>
          Text button
        </ui-button>

        <ui-button type="text" disabled @click="${this._clickHandler}">Text button</ui-button>
        <ui-button type="text" disabled @click="${this._clickHandler}">
          <ui-icon slot="icon" icon="add"></ui-icon>
          Text button
        </ui-button>
      </div>
    </section>

    <section class="demo-section">
      <h2 class="title-large">A submit button</h2>
      <form method="get" action="#" @submit="${this._submitHandler}">
        <label for="formInput">An input</label>
        <input type="text" id="formInput" required name="input"/>
        <label for="checkboxInput">A checkbox</label>
        <input type="checkbox" id="checkboxInput" name="flag"/>
        <ui-button type="filled" name="submit" value="on" submit>Submit</ui-button>
      </form>
    </section>

    ${this.formValues ? html`
      <output>
        <code><pre>${this.formValues}</pre></code>
      </output>
      ` : html``}
    `;
  }
}

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