<template>
  <div
    :class="{
      'mm-typo-text': true,
      [`mm-typo-text__${type}`]: type !== '',
      'mm-typo-text__disabled': disabled,
    }">
    <div
      v-if="!localIsEditing"
      :class="{
        'mm-typo-content': true,
      }">
      {{ text }}
    </div>
    <typo-copyable
      v-if="copyable"
      :copyable="copyable"
      :default-text="text">
      <template slot="copy-icon">
        <slot name="copy-icon"></slot>
      </template>
      <template slot="copyed-icon">
        <slot name="copyed-icon"></slot>
      </template>
    </typo-copyable>

    <typo-editable
      v-if="editable"
      :text="text"
      :is-editing.sync="localIsEditing"
      :editable="editable">
      <template slot="edit-icon">
        <slot name="edit-icon"></slot>
      </template>
    </typo-editable>
  </div>
</template>

<script>
import TypoCopyable from "./components/copyable"
import TypoEditable from "./components/editable"

export default {
  name: "mm-typo-text",
  components: {
    TypoCopyable,
    TypoEditable,
  },
  props: {
    text: {
      type: String,
    },
    type: {
      type: String,
      validator(value) {
        return ["", "success", "warning", "info", "error"].includes(value)
      },
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    copyable: {
      type: [Boolean, Object],
      default: false,
    },
    isEditing: {
      type: Boolean,
      default: false,
    },
    editable: {
      type: [Boolean, Object],
      default: false,
    },
  },
  data() {
    return {
      localIsEditing: this.isEditing,
    }
  },
  watch: {
    isEditing(val) {
      this.localIsEditing = val
    },
    localIsEditing(val) {
      this.$emit("update:isEditing", val)
    },
  },
}
</script>
