/**
 * {图标组件}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/03/06 15:17:25
 */

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

import SVG_DICT from './svg.js'

let dict = SVG_DICT
if (window.EXT_SVG_DICT) {
  Object.assign(dict, EXT_SVG_DICT)
}

export default {
  extend(icons = {}) {
    Object.assign(dict, icons)
  }
}

class Icon extends Component {
  static props = {
    name: {
      type: String,
      default: null,
      observer(val) {
        if (val === '') {
          this.name = null
        }
      }
    }
  }

  static styles = css`
    :host {
      display: inline-flex;
      width: var(--wc-icon-size, 32px);
      height: var(--wc-icon-size, 32px);
    }
    :host(:not([name])) {
      display: none;
    }
    .svg {
      display: block;
      width: 100%;
      height: 100%;
      color: inherit;
      fill: currentColor;

      &.loading {
        animation: load 1.5s linear infinite;
      }

      circle {
        stroke: currentColor;
        animation: circle 1.5s ease-in-out infinite;
      }
    }
    $gaps: (
      's': 20px,
      'm': 24px,
      'l': 32px,
      'xl': 36px,
      'xxl': 44px
    );

    @loop $k, $v in $gaps {
      :host([size='#{$k}']) {
        width: $v;
        height: $v;
      }
    }

    @keyframes circle {
      0% {
        stroke-dasharray: 0, 3812px;
        stroke-dashoffset: 0;
      }
      50% {
        stroke-dasharray: 1906px, 3812px;
        stroke-dashoffset: -287px;
      }
      100% {
        stroke-dasharray: 1906px, 3812px;
        stroke-dashoffset: -2393px;
      }
    }

    @keyframes load {
      to {
        transform: rotate(360deg);
      }
    }
  `

  render() {
    return html`
      <svg
        class=${classMap({ svg: true, loading: this.name === 'loading' })}
        viewBox="0 0 1024 1024"
      >
        ${this.name === 'loading'
          ? svg`<circle cx="512" cy="512" r="384" fill="none" stroke-width="80" />`
          : svg`<path d="${dict[this.name]}" />`}
      </svg>
    `
  }
}

Icon.reg('icon')