<script>
import Modal from '../VModal/VModal.vue'

export default {
  name: 'ButtonModal',
  components: {Modal},
  props: {
    text: {
      default: "",
      type: String
    },
    "btnClass": {
      default: "",
      type: String,
    },
    containerClass: {
      default: "",
      type: String,
    },
    forcedBtnClass: {
      default: "",
      type: String
    },
    onToggle: {
      default: () => null,
      type: Function
    }
  },
  data() {
    return {
      open: false,
    }
  },
  computed: {
    __btnClass__() {
      if (this.forcedBtnClass) return this.forcedBtnClass
      return `${this.btnClass} cursor-pointer w-full bg-transparent hover:bg-primary text-primary font-semibold hover:text-white py-1 text-ssm px-4 border border-primary hover:border-transparent rounded-lg text-center transition_up`
    }
  },
  methods: {
    toggle () {
      this.open = !this.open
      this.onToggle({isOpen: this.open})
    }
  }
}

</script>


<template>
  <div
    v-if="text"
    :class="__btnClass__"
    @click="toggle"
  >
    {{ text }}
  </div>
  <div
    v-if="!text"
    :class="__btnClass__"
    @click="toggle"
  >
    <slot name="button" />
  </div>
  <Modal
    v-if="open"
    :close="toggle"
    :isOpen="true"
    :containerClass="containerClass"
  >
    <slot />
  </Modal>
</template>
