<template>
  <div class="pui-modal" :style="customStyle">
    <div class="header" :class="[type]">
      <div class="title">
        <h1>{{ title }}</h1>
        <span v-if="description">{{ description }}</span>
      </div>
      <div class="actions">
        <button
          class="close" 
          v-if="canClose"
          @click="close"
        >
          <i class="mdi mdi-close" />
        </button>
      </div>
    </div>
    <div class="content">
      <slot />
    </div>
    <div class="footer" v-if="hasFooter">
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'PModalWindow',
  props: {
    type: String,
    title: String,
    description: String,
    width: {
      type: [String, Number],
      default: 700
    },
    canClose: {
      type: Boolean,
      default: true
    },
    fullScreen: Boolean,
  },
  data() {
    return {
      newWidth: typeof this.width === 'number'
                ? this.width + 'px'
                : this.width
    }
  },
  methods: {
    close() {
      if (this.canClose) {
        this.$emit('close')
      }
    },
  },
  computed: {
    hasFooter() {
      return !!this.$slots.footer
    },
    customStyle() {
      return { minWidth: this.newWidth }
    }
  }
}
</script>