import { html, svg, TemplateResult } from 'lit'
import { iconWrapper } from '../../../../src/md/icons/Icons.js'
import type UiChip from '../../../../src/md/chip/internals/Chip.js'
import { DemoPage } from '../../../../src/demo/DemoPage.js'
import '../../../../src/md/chip/ui-chip.js'
import '../../../../src/md/icons/ui-icon.js'

const calendarIcon = iconWrapper(
  svg`<path d="M17 22v-3h-3v-2h3v-3h2v3h3v2h-3v3ZM5 20q-.825 0-1.413-.587Q3 18.825 3 18V6q0-.825.587-1.412Q4.175 4 5 4h1V2h2v2h6V2h2v2h1q.825 0 1.413.588Q19 5.175 19 6v6.1q-.5-.075-1-.075t-1 .075V10H5v8h7q0 .5.075 1t.275 1ZM5 8h12V6H5Zm0 0V6v2Z"/>`
)

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

  handleClickHandler(e: Event): void {
    const chip = e.target as UiChip
    console.log(`A ${chip.type} chip was clicked.`)
  }

  handleClose(e: Event): void {
    const chip = e.target as UiChip
    console.log(`A ${chip.type} chip was closed.`)
  }

  handleList(e: Event): void {
    const chip = e.target as UiChip
    console.log(`A ${chip.type} chip requested to trigger a list.`)
  }

  handleSelect(e: Event): void {
    const chip = e.target as UiChip
    console.log('A filter chip was selected, current state is', chip.checked)
  }

  contentTemplate(): TemplateResult {
    return html`
      <a href="../">Back</a>
      <section class="demo-section">
        <h2 class="title-large">Assist chip</h2>
        <div class="demo-row grid-4">
          <ui-chip type="assist" @click="${this.handleClickHandler}">Enabled</ui-chip>
          <ui-chip type="assist" disabled @click="${this.handleClickHandler}">Disabled</ui-chip>

          <ui-chip type="assist" @click="${this.handleClickHandler}">
            <ui-icon slot="icon">${calendarIcon}</ui-icon>
            With icon
          </ui-chip>

          <ui-chip type="assist" @click="${this.handleClickHandler}" disabled>
            <ui-icon slot="icon">${calendarIcon}</ui-icon>
            Disabled with icon
          </ui-chip>
        </div>

        <div class="demo-row grid-4">
          <ui-chip type="assist" @click="${this.handleClickHandler}" elevated>Enabled</ui-chip>
          <ui-chip type="assist" disabled @click="${this.handleClickHandler}" elevated>Disabled</ui-chip>

          <ui-chip type="assist" @click="${this.handleClickHandler}" elevated>
            <ui-icon slot="icon">${calendarIcon}</ui-icon>
            With icon
          </ui-chip>

          <ui-chip type="assist" @click="${this.handleClickHandler}" disabled elevated>
            <ui-icon slot="icon">${calendarIcon}</ui-icon>
            Disabled with icon
          </ui-chip>
        </div>
      </section>

      <section class="demo-section">
        <h2 class="title-large">Filter chip</h2>
        <div class="demo-row grid-4">
          <ui-chip type="filter" @click="${this.handleClickHandler}" @select="${this.handleSelect}">Docs</ui-chip>
          <ui-chip type="filter" checked @click="${this.handleClickHandler}" @select="${this.handleSelect}"
            >Slides</ui-chip
          >
          <ui-chip type="filter" disabled @click="${this.handleClickHandler}" @select="${this.handleSelect}"
            >Images</ui-chip
          >
          <ui-chip
            type="filter"
            list="abc"
            @click="${this.handleClickHandler}"
            @list="${this.handleList}"
            @select="${this.handleSelect}"
            >Other</ui-chip
          >
        </div>
        <div class="demo-row grid-4">
          <ui-chip type="filter" @click="${this.handleClickHandler}" elevated @select="${this.handleSelect}"
            >Docs</ui-chip
          >
          <ui-chip type="filter" checked @click="${this.handleClickHandler}" elevated @select="${this.handleSelect}"
            >Slides</ui-chip
          >
          <ui-chip type="filter" disabled @click="${this.handleClickHandler}" elevated @select="${this.handleSelect}"
            >Images</ui-chip
          >
          <ui-chip
            type="filter"
            list="abc"
            @click="${this.handleClickHandler}"
            elevated
            @list="${this.handleList}"
            @select="${this.handleSelect}"
            >Other</ui-chip
          >
        </div>
      </section>

      <section class="demo-section">
        <h2 class="title-large">Input chip</h2>
        <div class="demo-row grid-3">
          <ui-chip type="input" @click="${this.handleClickHandler}">Enabled</ui-chip>
          <ui-chip type="input" closable @click="${this.handleClickHandler}" @close="${this.handleClose}"
            >Closable</ui-chip
          >
          <ui-chip type="input" disabled @click="${this.handleClickHandler}">Disabled</ui-chip>
        </div>
        <div class="demo-row grid-3">
          <ui-chip type="input" @click="${this.handleClickHandler}">
            <ui-icon slot="icon">${calendarIcon}</ui-icon>
            With icon
          </ui-chip>
          <ui-chip type="input" @click="${this.handleClickHandler}" closable @close="${this.handleClose}">
            <ui-icon slot="icon">${calendarIcon}</ui-icon>
            With icon
          </ui-chip>
          <ui-chip type="input" @click="${this.handleClickHandler}" closable disabled @close="${this.handleClose}">
            <ui-icon slot="icon">${calendarIcon}</ui-icon>
            With icon
          </ui-chip>
        </div>
        <div class="demo-row grid-3">
          <ui-chip type="input" @click="${this.handleClickHandler}">
            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
            With avatar
          </ui-chip>
          <ui-chip type="input" @click="${this.handleClickHandler}" closable @close="${this.handleClose}">
            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
            With avatar
          </ui-chip>
          <ui-chip type="input" @click="${this.handleClickHandler}" closable disabled @close="${this.handleClose}">
            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
            With avatar
          </ui-chip>
        </div>
      </section>

      <section class="demo-section">
        <h2 class="title-large">Suggestion chip</h2>
        <div class="demo-row grid-3">
          <ui-chip type="suggestion" @click="${this.handleClickHandler}">Enabled</ui-chip>
          <ui-chip type="suggestion" @click="${this.handleClickHandler}" elevated>Elevated</ui-chip>
          <ui-chip type="suggestion" disabled @click="${this.handleClickHandler}">Disabled</ui-chip>
        </div>
      </section>
    `
  }
}

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