<template>
  <div class="demo-icon-full">
    <h2>Icons</h2>

    <div class="demo-box">
      <ui-input
        v-model="keyword"
        placeholder="输入Icon名称查找"></ui-input>
    </div>

    <div
      v-for="group of inlineIcons"
      :key="group.key"
      class="demo-box">
      <h3>{{ group.label }} Icons</h3>

      <div class="icon-list">
        <div
          v-for="icon of group.icons"
          :key="icon"
          class="icon-item">
          <ui-icon
            :name="icon"
            :fill="group.fill"></ui-icon>
          <p class="icon-name">
            {{ icon }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cloneDeep from "lodash/cloneDeep"
import { Icon, Input } from "amumu-ui"

import SLDS_ICONS_UTILITY from "../../../icons"

function getFilteredList(object) {
  return Object.keys(object).filter(name => name !== "viewBox")
}

const INLINE_ICONS = [
  {
    label: "Utility",
    key: "utility",
    fill: "#706e6b",
    icons: getFilteredList(SLDS_ICONS_UTILITY),
  },
]

export default {
  components: {
    "ui-icon": Icon,
    "ui-input": Input,
  },
  data() {
    return {
      keyword: "",
      inlineIcons: INLINE_ICONS,
    }
  },
  watch: {
    keyword(val) {
      if (val) {
        this.inlineIcons = cloneDeep(INLINE_ICONS).map(group => {
          group.icons = group.icons.filter(name => name.indexOf(val) > -1)
          return group
        })
      } else {
        this.inlineIcons = INLINE_ICONS
      }
    },
  },
}
</script>

<style lang="scss">
.icon-list {
  display: flex;
  flex-wrap: wrap;
  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    width: 8rem;
    font-size: 30px;

    > p {
      text-align: center;
      width: 100%;
      word-wrap: break-word;
      font-size: 0.75rem;
    }
  }
}
</style>
