/* eslint-disable max-len */
import { html, svg, TemplateResult } from 'lit'
import * as EventUtils from '@api-client/core/lib/events/Utils.js'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import { iconWrapper } from '../../../src/md/icons/Icons.js'

import '../../../src/md/list/ui-list.js'
import '../../../src/md/list/ui-list-item.js'
import '../../../src/md/checkbox/ui-checkbox.js'

const chatIcon = iconWrapper(
  svg`<path d="M6 14h8v-2H6Zm0-3h12V9H6Zm0-3h12V6H6ZM2 22V4q0-.825.588-1.413Q3.175 2 4 2h16q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18H6Zm2-4.825L5.175 16H20V4H4ZM4 4v13.175Z"/>`
)

class ComponentDemoPage extends DemoPage {
  constructor() {
    super()
    this.componentName = 'UI list'
  }

  supportingText =
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'

  contentTemplate(): TemplateResult {
    return html`
      <a href="../">Back</a>
      <section class="demo-section">
        <h2 class="title-large">Single line</h2>

        <div class="demo-row">
          <ui-list-item>Single list item</ui-list-item>
          <ui-list-item>
            <span slot="start">${chatIcon}</span>
            Single list item with an icon
          </ui-list-item>
          <ui-list-item image="avatar">
            <span slot="start" class="avatar">PUP</span>
            Pawel Uchida-Psztyc
            <ui-checkbox slot="end" @pointerdown="${EventUtils.cancelEvent}"></ui-checkbox>
          </ui-list-item>
          <ui-list-item image="image">
            <img src="../chip/pawel6c9a.jpg" alt="Avatar" slot="start" />
            <p slot="end-text">100+</p>
            Image element
          </ui-list-item>

          <ui-list-item image="video">
            <span slot="start" class="video-image">
              <img src="../chip/pawel6c9a.jpg" alt="video" />
            </span>
            Video image element
            <ui-checkbox
              slot="end"
              @click="${EventUtils.cancelEvent}"
              @pointerdown="${EventUtils.cancelEvent}"
            ></ui-checkbox>
          </ui-list-item>
        </div>

        <h3 class="title-medium">List example</h3>
        <div class="demo-row">
          <ui-list>
            <ui-list-item image="avatar">
              <span slot="start" class="avatar">PUP</span>
              Pawel Uchida-Psztyc
              <ui-checkbox slot="end"></ui-checkbox>
            </ui-list-item>
            <ui-list-item image="avatar" class="highlight">
              <span slot="start" class="avatar">PUP</span>
              Highlighted item
              <ui-checkbox slot="end"></ui-checkbox>
            </ui-list-item>
            <ui-list-item image="avatar" class="select">
              <span slot="start" class="avatar">PUP</span>
              Selected item
              <ui-checkbox slot="end"></ui-checkbox>
            </ui-list-item>
          </ui-list>
        </div>
      </section>

      <section class="demo-section">
        <h2 class="title-large">Two lines</h2>
        <div class="demo-row">
          <ui-list-item lines="two">
            <span slot="start">${chatIcon}</span>
            Two list item with an icon
            <p slot="supporting-text">${this.supportingText}</p>
          </ui-list-item>
          <ui-list-item image="avatar" lines="two">
            <span slot="start" class="avatar">PUP</span>
            Pawel Uchida-Psztyc
            <p slot="supporting-text">${this.supportingText}</p>
            <ui-checkbox
              slot="end"
              @click="${EventUtils.cancelEvent}"
              @pointerdown="${EventUtils.cancelEvent}"
            ></ui-checkbox>
          </ui-list-item>
          <ui-list-item image="image" lines="two">
            <img src="../chip/pawel6c9a.jpg" alt="Avatar" slot="start" />
            <p slot="end-text">100+</p>
            <p slot="supporting-text">${this.supportingText}</p>
            Image element
          </ui-list-item>

          <ui-list-item image="video" lines="two">
            <span slot="start" class="video-image">
              <img src="../chip/pawel6c9a.jpg" alt="video" />
            </span>
            <p slot="supporting-text">${this.supportingText}</p>
            Video image element
            <ui-checkbox
              slot="end"
              @click="${EventUtils.cancelEvent}"
              @pointerdown="${EventUtils.cancelEvent}"
            ></ui-checkbox>
          </ui-list-item>
        </div>
      </section>

      <section class="demo-section">
        <h2 class="title-large">Three lines</h2>
        <div class="demo-row">
          <ui-list-item lines="three">
            <span slot="start">${chatIcon}</span>
            Two list item with an icon
            <p slot="supporting-text">${this.supportingText}</p>
          </ui-list-item>
          <ui-list-item image="avatar" lines="three">
            <span slot="start" class="avatar">PUP</span>
            Pawel Uchida-Psztyc
            <p slot="supporting-text">${this.supportingText}</p>
            <ui-checkbox
              slot="end"
              @click="${EventUtils.cancelEvent}"
              @pointerdown="${EventUtils.cancelEvent}"
            ></ui-checkbox>
          </ui-list-item>
          <ui-list-item image="image" lines="three">
            <img src="../chip/pawel6c9a.jpg" alt="Avatar" slot="start" />
            <p slot="end-text">100+</p>
            <p slot="supporting-text">${this.supportingText}</p>
            Image element
          </ui-list-item>

          <ui-list-item image="video" lines="three">
            <span slot="start" class="video-image">
              <img src="../chip/pawel6c9a.jpg" alt="video" />
            </span>
            <p slot="supporting-text">${this.supportingText}</p>
            Video image element
            <ui-checkbox
              slot="end"
              @click="${EventUtils.cancelEvent}"
              @pointerdown="${EventUtils.cancelEvent}"
            ></ui-checkbox>
          </ui-list-item>
        </div>

        <h2 class="title-large">Static (no interaction)</h2>

        <div class="demo-row">
          <ui-list-item static>Single list item</ui-list-item>
          <ui-list-item static>
            <span slot="start">${chatIcon}</span>
            Single list item with an icon
          </ui-list-item>
          <ui-list-item image="avatar" static>
            <span slot="start" class="avatar">PUP</span>
            Pawel Uchida-Psztyc
            <ui-checkbox slot="end" @pointerdown="${EventUtils.cancelEvent}"></ui-checkbox>
          </ui-list-item>
          <ui-list-item image="image" static>
            <img src="../chip/pawel6c9a.jpg" alt="Avatar" slot="start" />
            <p slot="end-text">100+</p>
            Image element
          </ui-list-item>

          <ui-list-item image="video" static>
            <span slot="start" class="video-image">
              <img src="../chip/pawel6c9a.jpg" alt="video" />
            </span>
            Video image element
            <ui-checkbox
              slot="end"
              @click="${EventUtils.cancelEvent}"
              @pointerdown="${EventUtils.cancelEvent}"
            ></ui-checkbox>
          </ui-list-item>
        </div>
      </section>
    `
  }
}

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