import { html, css, Component } from 'wkit'

class Home extends Component {
  static styles = css`
    .home {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 0 32px;
      user-select: none;

      .card {
        width: 1024px;
        margin-top: 24px;
        border: 1px solid var(--color-plain-2);

        .title {
          display: flex;
          align-items: center;
          padding: 12px 16px;
          font-size: 22px;
          background: var(--color-plain-1);
        }

        .select {
          position: relative;
          display: inline-flex;
          margin: 0 15px;
          border: 1px solid var(--color-grey-2);
          border-radius: 4px;

          & select {
            appearance: none;
            width: 113px;
            height: 24px;
            padding: 0 6px;
            border: 0;
            border-radius: inherit;
            font: inherit;
            font-size: 12px;
            background: #fff;
            color: inherit;
            outline: none;
          }

          .trigon {
            position: absolute;
            right: 8px;
            top: 8px;
            width: 6px;
            height: 6px;
            border: 1px solid var(--color-grey-2);
            border-top: 0;
            border-right: 0;
            content: '';
            transform: rotate(-45deg);
          }

          & option {
            appearance: none;
            border: 0;
          }
        }

        .list {
          padding: 16px 8px;
          font-size: 14px;
        }

        .link {
          display: block;
          padding: 2px 6px;
          border-radius: 4px;
          transition: background 0.1s ease;

          & b {
            color: var(--color-teal-1);
          }
          & i {
            color: var(--color-blue-1);
          }

          &:hover {
            background: var(--color-plain-1);
          }
          &:active {
            background: var(--color-plain-a);
          }
        }
      }
    }
  `

  #libs = [
    {
      name: 'wkit',
      version: '1.10.11',
      files: ['index.es6.js', 'index.js']
    },
    {
      name: 'wkitd',
      version: '1.3.0',
      files: ['index.es6.js', 'index.js']
    }
  ]

  #copy(ev) {
    let elem = ev.target
    if (elem.tagName === 'CODE' || elem.parentNode.tagName === 'CODE') {
      if (elem.parentNode.tagName === 'CODE') {
        elem = elem.parentNode
      }
      navigator.clipboard.writeText(elem.textContent.trim())
      layer.toast('复制成功', 'success')
    }
  }

  #versionChanged(ev) {
    this.$store.result.version = ev.target.value
  }

  mounted() {
    let route = this.$route
    this.$store.searchShow = true
    if (route.query.name) {
      this.$store.searchInput = route.query.name
    }
  }

  render() {
    let { result, searchInput } = this.$store
    let { version, versions } = result
    let list = result[version]

    return html`
      <main class="home" @click=${this.#copy}>
        ${searchInput
          ? html`
              <dl class="card noselect">
                <dt class="title">
                  ${result.id || searchInput} -
                  <section
                    class="select"
                    style=${versions.length < 1 ? 'display:none' : ''}
                  >
                    <select @change=${this.#versionChanged}>
                      ${versions.map(
                        v =>
                          html`<option value=${v} :selected=${v === version}>
                            ${v}
                          </option>`
                      )}
                    </select>
                    <i class="trigon"></i>
                  </section>
                </dt>
                <dd class="list">
                  ${list
                    ? list.map(
                        f => html`
                          <code class="link">
                            //jscdn.ink/<b>${result.id}</b>/<i>${version}</i>/${f}
                          </code>
                        `
                      )
                    : '没有你要找的库'}
                </dd>
              </dl>
            `
          : this.#libs.map(
              it => html`
                <dl class="card noselect">
                  <dt class="title">${it.name} - v${it.version}</dt>
                  <dd class="list">
                    ${it.files.map(
                      f => html`
                        <code class="link">
                          //jscdn.ink/<b>${it.name}</b>/<i>${it.version}</i>/${f}
                        </code>
                      `
                    )}
                  </dd>
                </dl>
              `
            )}
      </main>
    `
  }
}

Home.reg('home')