<script>
import config from "../../managers/config"
import { castArray } from "lodash"
import DescriptionItem from "./../description-item"

config.defaults({
  "Description.size": "default",
  "Description.column": 3,
  "Description.layout": "horizontal",
  "Description.labelWidth": 80,
  "Description.labelSuffix": ":",
  "Description.bordered": false,
})

const RESPONSE_SIZES = ["xs", "sm", "md", "lg", "xl"]

export default {
  name: "mm-description",
  components: {
    "ui-description-item": DescriptionItem,
  },
  provide() {
    return {
      "mm-description": this,
    }
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    layout: {
      type: String,
      default: () => config.get("Description.layout"),
      validator(val) {
        return ["horizontal", "vertical"].includes(val)
      },
    },
    size: {
      type: String,
      default: () => config.get("Description.size"),
      validator(val) {
        return ["large", "default", "medium", "small"].includes(val)
      },
    },
    column: {
      type: [Number, Object],
      default: () => config.get("Description.column"),
    },
    labelWidth: {
      type: [String, Number],
      default: () => config.get("Description.labelWidth"),
    },
    labelSuffix: {
      type: String,
      default: () => config.get("Description.labelSuffix"),
    },
    bordered: {
      type: Boolean,
      default: () => config.get("Description.bordered"),
    },
  },
  data() {
    return {
      responseSize: Object.freeze(RESPONSE_SIZES),
    }
  },
  render(h) {
    const validChlidren = castArray(this.$slots.default).filter(vnode => vnode.tag)
    const renderTitle = this.$slots.title || this.title

    return (
      <div class={["mm-description", { "mm-description__bordered": this.bordered,
        [`mm-description__${this.layout}`]: this.layout,
        [`mm-description__${this.size}`]: this.size !== "default",
      }]
      } ref="description">
        {renderTitle && <div class="mm-description-title">{renderTitle}</div>}
        <div class="mm-description-content">{validChlidren}</div>
      </div>
    )
  },
}
</script>
