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

class Aside extends Component {
  static styles = [
    css`
      .searchbar {
        padding: 0 16px;

        input {
          width: 100%;
          height: 30px;
          padding: 0 16px;
          line-height: 1;
          border: 1px solid var(--color-grey-1);
          border-radius: 16px;
          background: rgba(255, 255, 255, 0.5);
          font-size: 12px;
          color: inherit;
          outline: none;
          transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;

          &:focus {
            background: rgba(255, 255, 255, 1);
            border-color: transparent;
          }

          &::placeholder {
            color: var(--color-grey-2);
          }
        }
      }

      .category {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 16px;
        padding-left: 16px;
        list-style: none;
        --wc-icon-size: 16px;

        .item {
          position: relative;
          display: flex;
          align-items: center;
          height: 36px;
          padding: 0 16px;
          gap: 4px;
          line-height: 1;
          border-radius: 8px 0 0 8px;
          list-style: none;
          transition: color 0.2s ease-in-out, background 0.2s ease-in-out;

          &:hover {
            background: #fff;
          }

          &.active {
            background: #fff;
            color: var(--color-blue-1);

            &::before,
            &::after {
              position: absolute;
              right: 0;
              top: -12px;
              width: 12px;
              height: 12px;
              background: url(/assets/img/round.webp);
              content: '';
            }
            &::after {
              top: unset;
              bottom: -12px;
              transform: rotate(-90deg);
            }
          }
        }
        router-link {
          flex: 1;
          height: 100%;
        }
      }
    `
  ]

  #path = '/'

  mounted() {
    watch('$router.path', r => {
      this.#path = r.path
      this.$requestUpdate()
    })
  }

  render() {
    let path = this.#path
    let list = this.$store.categories
    let paths = list.slice(4).map(it => it.path)

    return html`
      <aside class="container">
        <search class="searchbar">
          <input placeholder="搜索应用" />
        </search>

        <menu class="category">
          <li class="item ${path === '/' ? 'active' : ''}">
            <wc-icon name="home"></wc-icon>
            <router-link>装机必备</router-link>
          </li>
          ${list.slice(1, 4).map(
            it => html`
              <li class="item ${path === it.path ? 'active' : ''}">
                <wc-icon name=${it.icon}></wc-icon>
                <router-link :to=${{ path: it.path }}>${it.name}</router-link>
              </li>
            `
          )}
          <li
            class="item ${path === list[0].path || paths.includes(path)
              ? 'active'
              : ''}"
          >
            <wc-icon name="menu"></wc-icon>
            <router-link :to=${{ path: list[0].path }}
              >${list[0].name}</router-link
            >
          </li>
        </menu>
      </aside>
    `
  }
}

Aside.reg('aside')