<template>
  <div class="mm-skeleton">
    <div
      v-if="loading"
      class="mm-skeleton-wrapper">
      <div
        v-if="avatar"
        class="mm-skeleton-header">
        <span
          :class="[
            'mm-skeleton-avatar',
            `mm-skeleton-avatar__${realAvatar.shape}`,
            `mm-skeleton-avatar__${realAvatar.size}`,
            {
              'mm-skeleton--active': active,
            },
          ]"></span>
      </div>
      <div class="mm-skeleton-content">
        <h3
          v-if="title"
          :style="{
            width: formatUnit(realTitle.width),
          }"
          :class="[
            'mm-skeleton-title',
            {
              'mm-skeleton--active': active,
            },
          ]"></h3>
        <ul
          v-if="paragraph"
          class="mm-skeleton-paragraph">
          <li
            v-for="(item, index) of paragraphList"
            :key="index"
            :style="{ width: formatUnit(item) }"
            :class="{ 'mm-skeleton--active': active }"
            class="mm-skeleton-paragraph-item"></li>
        </ul>
      </div>
    </div>
    <slot v-else></slot>
  </div>
</template>

<script>
import toNumber from "lodash/toNumber"
import isObject from "lodash/isObject"
import config from "../../managers/config"

config.defaults({
  "Skeleton.paragraph": true,
  "Skeleton.title": true,
  "Skeleton.lastRowWidth": "61%",
})

export default {
  name: "mm-skeleton",
  props: {
    active: {
      type: Boolean,
      default: false,
    },
    avatar: {
      type: [Boolean, Object],
      default: false,
      validator(value) {
        if (isObject(value)) {
          let size = true
          let shape = true
          if (value.hasOwnProperty("size")) {
            size = ["small", "middle", "large"].includes(value.size)
          }
          if (value.hasOwnProperty("shape")) {
            shape = ["square", "circle"].includes(value.shape)
          }
          return size && shape
        }
        return true
      },
    },
    loading: {
      type: Boolean,
      default: true,
    },
    paragraph: {
      type: [Boolean, Object],
      default: () => config.get("Skeleton.paragraph"),
    },
    title: {
      type: [Boolean, Object],
      default: () => config.get("Skeleton.title"),
    },
    lastRowWidth: {
      type: String,
      default: () => config.get("Skeleton.lastRowWidth"),
    },
  },
  data() {
    return {}
  },
  computed: {
    realAvatar() {
      return {
        size: "large",
        shape: "circle",
        ...this.avatar,
      }
    },
    realTitle() {
      return {
        width: "50%",
        ...this.title,
      }
    },

    paragraphList() {
      const { rows, width = [] } = this.realParagraph
      if (~~rows <= 0) {
        return []
      }

      if (Array.isArray(width)) {
        const fill = new Array(rows - width.length - 1).fill("100%")
        return [...width, ...fill, this.lastRowWidth].slice(0, rows)
      }

      return [...new Array(rows - 1).fill("100%"), width]
    },

    realParagraph() {
      return {
        rows: 3,
        width: this.lastRowWidth,
        ...this.paragraph,
      }
    },
  },
  methods: {
    formatUnit(value) {
      const v = toNumber(value)
      return isNaN(v) ? v : `${v}px`
    },
  },
}
</script>
