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;
          border-radius: 8px 0 0 8px;
          list-style: none;
          transition: background 0.2s ease-in-out;

          &:hover {
            background: rgba(255, 255, 255, 0.5);
          }

          &.active {
            background: rgba(255, 255, 255, 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);
            }
          }
        }
      }
    `
  ]

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

        <menu class="category">
          <li class="item active"><wc-icon name="home"></wc-icon>装机必备</li>
          ${this.$store.categories
            .slice(0, 3)
            .map(
              it => html`
                <li class="item">
                  <wc-icon name=${it.icon}></wc-icon>${it.name}
                </li>
              `
            )}
          <li class="item"><wc-icon name="menu"></wc-icon>全部分类</li>
        </menu>
      </aside>
    `
  }
}

Aside.reg('aside')