import Vue from 'vue'
import './SntDialog.scss'
import { VDialog } from 'vuetify/lib'

export default Vue.extend({
  name: 'SntDialog',
  components: { VDialog },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: undefined
    },
    label: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: 'auto'
    },
    maxWidth: {
      type: [String, Number],
      default: 'auto'
    },
    content: {
      type: String,
      default: ''
    },
    transition: {
      type: [String, Boolean],
      default: 'dialog-transition'
    },
    contentClass: {
      type: String,
      default: ''
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    retainFocus: {
      type: Boolean,
      default: true
    },
    attach: {
      type: Boolean,
      default: false
    },
    scrollable: {
      type: Boolean,
      default: false
    },
    eager: {
      type: Boolean,
      default: false
    },
    persistent: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dialog: this.value
    }
  },
  watch: {
    value (dialog) {
      this.dialog = dialog
    }
  },
  methods: {
    close () {
      this.change(false)
    },
    change (dialog) {
      this.setDialog(dialog)
      this.$emit('input', dialog)
    },
    setDialog (dialog = false) {
      this.dialog = dialog
    }
  },
  template: `
    <div class="snt-dialog">
      <div class="snt-dialog__content">
        <v-dialog
          :value="dialog"
          :fullscreen="fullscreen"
          :transition="transition"
          :content-class="contentClass"
          :width="width"
          :max-width="maxWidth"
          :retain-focus="retainFocus"
          :attach="attach"
          :scrollable="scrollable"
          :persistent="persistent"
          :eager="eager"
          @input="change($event)"
          @click:outside="close()">
          <template #activator="{ on }">
            <slot
              :attrs="{ icon, label, content }"
              :on="on"
              name="activator">
              <v-btn
                v-if="label || icon"
                :ripple="false"
                class="snt-dialog__activator"
                depressed
                v-on="on">
                <v-icon v-if="icon">
                  {{ icon }}
                </v-icon>
                {{ label }}
              </v-btn>
            </slot>
          </template>
          <slot
            :attrs="{ icon, label, content }"
            :icon="icon"
            :label="label"
            :content="content"
            :close="close"
            :on="{ close }">
            <div class="snt-dialog__modal">
              <div class="snt-dialog-modal__title">
                <v-spacer />
                <v-btn
                  icon
                  @click="close()">
                  <v-icon>mdi-close</v-icon>
                </v-btn>
              </div>
              <div
                class="snt-dialog-modal__content"
                v-html="content" />
            </div>
          </slot>
        </v-dialog>
      </div>
    </div>
  `
})
