import { html, css, Component, classMap } from 'wkit'
import { watch } from 'wkitd'

import fetch from '/lib/fetch.js'

class Header extends Component {
  static styles = css`
    ::selection {
      background: var(--color-plain-a);
    }
    .common-header {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 240px;
      background: var(--color-red-1);
      color: #fff;

      .wrapper {
        display: flex;
        width: 1024px;
        justify-content: space-between;
        align-items: center;
      }

      .navibar {
        height: 36px;
        margin-top: 24px;

        .logo {
          font-weight: bold;
          font-size: 26px;

          & img {
            display: block;
            height: 36px;
          }
        }

        .navi {
          display: flex;
          align-items: center;
          font-size: 16px;

          & router-link {
            margin: 0 16px;
            padding: 3px 6px;
            border-radius: 4px;
            transition: background 0.2s ease-in-out;

            &:hover,
            &.active {
              background: rgba(255, 255, 255, 0.3);
            }
          }
        }
      }

      .banner {
        width: 640px;
        text-align: center;
      }

      .search {
        display: none;
        width: 520px;
        color: #fff;
        --bg-color: rgba(0, 0, 0, 0.3);
      }

      &.search-show {
        height: 320px;
        .search {
          display: inline-block;
          --wc-input-border-color: none;
        }
      }

      &::after {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 48px;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.1);
        content: '免费、快速、开放的 CDN 服务';
      }
    }
    @media screen and (max-width: 1024px) {
      .common-header {
        .navibar {
          width: 100%;
          padding: 0 32px;
        }
        .wrapper {
          width: 100%;
        }
      }
    }
  `

  #search(ev) {
    let id = this.$store.searchInput

    if (id) {
      fetch('/package/search/' + encodeURIComponent(id))
        .then(r => {
          let dict = { versions: [], id }
          let last = null
          for (let it of r.data) {
            let tmp = it.split('/')
            let v = tmp.shift()
            let n = tmp.join('/')
            if (last === v) {
              dict[last].push(n)
            } else {
              last = v
              dict.versions.push(last)
              dict[last] = [n]
            }
          }
          dict.version = last
          this.$store.result = dict
        })
        .catch(err => {
          this.$store.result = { version: '', versions: [], id: '' }
        })
    } else {
      this.$store.result = { version: '', versions: [], id: '' }
    }
  }

  #handleInput(ev) {
    this.$store.searchInput = ev.target.value
  }

  mounted() {
    watch('$store.searchInput', val => {
      this.#search()
    })
    watch('$route', route => {
      if (route.path === '/' && !route.query.name) {
        this.$store.searchInput = ''
      }
    })
  }

  render() {
    return html`
      <div
        class=${classMap({
          'common-header': true,
          'search-show': this.$store.searchShow
        })}
      >
        <header class="navibar">
          <div class="wrapper">
            <a class="logo"><img src="/assets/logo.svg" /></a>

            <nav class="navi">
              <router-link :to=${{ path: '/' }}>首 页</router-link>
              <router-link :to=${{ path: '/request' }}>收 录</router-link>
              <router-link :to=${{ path: '/about' }}>关 于</router-link>
            </nav>
          </div>
        </header>

        <cite class="banner">
          <p>
            我们的目标是提供这样一个仓库，让它尽可能全面收录优秀的支持ESM访问的开源库，并免费为之提供
            CDN加速服务，使之有更好的访问速度和稳定的环境。
          </p>
          <p>同时我们也提供自主提交开源库的收录(前提是在npm上发布的)</p>
        </cite>

        <wc-input
          class="search"
          no-border
          placeholder="请输入开源库的名字~~"
          clearable
          value=${this.$store.searchInput}
          @submit=${this.#handleInput}
          @change=${this.#handleInput}
        ></wc-input>
      </div>
    `
  }
}

Header.reg('header')