import { html, TemplateResult } from 'lit'
import { reactive } from '../../../../src/decorators/index.js'
import type ButtonElement from '../../../../src/md/button/internals/button.js'
import { DemoPage } from '../../../../src/demo/DemoPage.js'

import '../../../../src/md/button/ui-elevated-button.js'
import '../../../../src/md/button/ui-filled-button.js'
import '../../../../src/md/button/ui-filled-tonal-button.js'
import '../../../../src/md/button/ui-outlined-button.js'
import '../../../../src/md/button/ui-text-button.js'
import '../../../../src/md/icons/ui-icon.js'
import '../../../../src/md/dialog/ui-dialog.js'

import '@material/web/button/text-button.js'
import '@material/web/button/filled-button.js'
import '@material/web/button/elevated-button.js'
import '@material/web/button/filled-tonal-button.js'
import '@material/web/button/outlined-button.js'

class ComponentDemoPage extends DemoPage {
  override accessor componentName = 'UI button'

  @reactive() accessor formValues: string | undefined

  @reactive() accessor dialogOpened = false

  _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
  }

  openDialog(): void {
    this.dialogOpened = true
  }

  dialogClosed(): void {
    this.dialogOpened = false
  }

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

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

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

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

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

      <section class="demo-section">
        <h2 class="title-large">A submit button within a form</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-filled-button name="submit" value="on" type="submit">Submit</ui-filled-button>
        </form>
      </section>

      <section class="demo-section">
        <h2 class="title-large">A submit button outside a form</h2>
        <form method="get" action="#" @submit="${this._submitHandler}" id="myForm">
          <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" />
        </form>
        <div>
          <ui-filled-button name="submit" value="on" type="submit" form="myForm">Submit</ui-filled-button>
        </div>
      </section>

      <section class="demo-section">
        <h2 class="title-large">Buttons in a dialog</h2>
        <ui-filled-button @click="${this.openDialog}">Open dialog</ui-filled-button>
        <ui-dialog ?open="${this.dialogOpened}" @close="${this.dialogClosed}" modal>
          <span slot="title">Dialog with a form</span>
          <form method="get" action="#" @submit="${this._submitHandler}" id="dialogForm">
            <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" />
          </form>
          <ui-text-button slot="button" value="dismiss">Dismiss</ui-text-button>
          <ui-text-button slot="button" name="submit" value="confirm" type="submit" form="dialogForm"
            >Submit</ui-text-button
          >
        </ui-dialog>
      </section>

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

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