<template>
  <q-dialog v-bind="$props" v-model="visible__" class="w-sidebar" position="right" full-height @hide="$emit('hide')">
    <q-layout class="w-sidebar-content full-height bg-white text-black" :style="style" :class="classes" container view="hHh lpr fff">
      <q-header :elevated="headerElevated">
        <q-toolbar>
          <q-toolbar-title :class="titleClass">
            {{ title }}
          </q-toolbar-title>
          <div class="row q-gutter-sm">
            <slot name="title-buttons" />
            <w-btn v-if="needDialogOnClose" icon="fal fa-times" flat round dense @click="$emit('showDialog')" />
            <w-btn v-else v-close-popup icon="fal fa-times" flat round dense />
          </div>
        </q-toolbar>
      </q-header>
      <q-page-container>
        <q-page padding>
          <slot />
        </q-page>
      </q-page-container>
    </q-layout>
  </q-dialog>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: null,
    },
    minWidth: {
      type: String,
      default: null,
    },
    color: {
      type: String,
      default: null,
    },
    headerElevated: {
      type: Boolean,
      default: true,
    },
    needDialogOnClose: {
      type: Boolean,
      default: false,
    },
    titleClass: {
      type: String,
      default: null
    }
  },
  emits: ["update:modelValue", "hide", "showDialog"],
  computed: {
    style() {
      return {
        "min-width": this.minWidth,
      };
    },
    classes() {
      return {
        [`bg-${this.color}`]: !!this.color,
      };
    },
    visible__: {
      get() {
        return this.modelValue || false;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
  },
};
</script>
