<template>
  <v-dialog
    v-model="c_dialog"
    scrollable
    :max-width="maxWidth"
    :persistent="persistent"
  >
    <v-card class="ws-dialog">
      <v-card-title v-if="showCardTitle">
        <div class="ws-dialog__title textPrimary--text">{{title}}</div>
        <v-spacer></v-spacer>
        <v-btn
          @click="close()"
          icon
          v-ripple="{class:'buttonRipple--text'}"
        >
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text class="pt-5">
        <slot name="content"></slot>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions v-if="showCardActions">
        <slot name="leftActions"></slot>
        <v-spacer></v-spacer>
        <slot name="rightActions"></slot>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data: () => ({
    c_dialog: false,
  }),
  methods: {
    close() {
      this.c_dialog = false;
      this.$emit("close");
      window.removeEventListener("keydown", this.$_keydownHandler);
    },
    open() {
      this.c_dialog = true;
      this.$emit("open");
      window.addEventListener("keydown", this.$_keydownHandler);
    },
    $_keydownHandler($event) {
      if ($event.code == "Escape") {
        this.close();
      }
    },
  },
  mounted() {
    if (this.value) {
      this.c_dialog = true;
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    persistent: {
      type: Boolean,
      default: false,
    },
    showCardTitle: {
      type: Boolean,
      default: true,
    },
    showCardActions: {
      type: Boolean,
      default: true,
    },
    maxWidth: {
      type: String,
      default: "720px",
    },
    title: {
      type: [String, Number],
      default: null,
    },
  },
  watch: {
    value: {
      handler() {
        this.c_dialog = this.value;
      },
    },
    c_dialog: {
      handler() {
        this.$emit("input", this.c_dialog);
        if (!this.c_dialog) {
          this.$emit("close");
        }
      },
    },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/ws-dialog.scss";
</style>