<template>
  <div
    v-ui-spinner="{visible: loading}"
    :class="{
      'mm-card__shadow': showShadow,
      'mm-card__border': border,
    }"
    class="mm-card"
    @mouseenter="hover = true"
    @mouseleave="hover = false">
    <div
      v-if="title || $slots.title"
      class="mm-card-title-wrapper">
      <div class="mm-card-title">
        <slot name="title">
          {{ title }}
        </slot>
      </div>
      <div
        v-if="$slots['title-action']"
        class="mm-card-title-action">
        <slot name="title-action"></slot>
      </div>
    </div>
    <div class="mm-card-cover">
      <slot name="cover"></slot>
    </div>
    <div
      :style="bodyStyle"
      class="mm-card-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import Spinner from "../../directives/spinner"
import config from "../../managers/config"

config.defaults({
  "Card.bodyStyle": () => ({}),
  "Card.border": true,
  "Card.shadow": "always",
})

export default {
  name: "mm-card",
  directives: {
    "ui-spinner": Spinner,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    bodyStyle: {
      type: Object,
      default() {
        return config.get("Card.bodyStyle").call(this)
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: () => config.get("Card.border"),
    },
    shadow: {
      type: String,
      default: () => config.get("Card.shadow"),
      validator(val) {
        return ["always", "hover", "never"].includes(val)
      },
    },
  },
  data() {
    return {
      hover: false,
    }
  },
  computed: {
    showShadow() {
      return this.shadow === "never"
        ? false
        : this.shadow === "always"
          ? true
          : this.shadow === "hover" && this.hover
    },
  },
}
</script>
