<template>
  <div>
    <modal :state="state" :z-index="zIndex">
      <div class="modal-dialog">
        <div class="modal-dialog-title sub-header">{{ title }}</div>
        <div class="modal-dialog-message">{{ message }}</div>
        <div class="modal-dialog-actions">
          <basic-button :show-icon="false" @click="action('accept')" v-if="acceptText!=null">{{ acceptText }}</basic-button>
          <basic-button :show-icon="false" @click="action('deny')" v-if="denyText!=null">{{ denyText }}</basic-button>
          <basic-button :show-icon="false" @click="action('dismiss')" variant="secondary">{{ dismissText }}</basic-button>
        </div>
      </div>
    </modal>
  </div>
</template>

<script>


import BasicButton from "@/components/UI/BasicButton.vue";
import Modal from "@/components/UI/Modal.vue";

export default {
  name: "ModalDialog",
  components: {Modal, BasicButton},
  emits: ['click'],
  props: {
    zIndex: {
      type: Number,
      required: false,
      validators: (value) => value >= 0,
      default: 5000
    },
    title: {
      type: String,
      required: true
    },
    message: {
      type: String,
      required: true
    },
    denyText: {
      type: String,
      required: false,
      default: null
    },
    acceptText: {
      type: String,
      required: false,
      default: 'OK'
    },
    dismissText: {
      type: String,
      required: false,
      default: 'Cancel'
    },
    state: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    action(action) {
      this.$emit('click', action);
    }
  }
}
</script>

<style scoped>

.modal-dialog {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.modal-dialog-title {
  font-weight: normal;
  font-size: 1.4rem;
  color: #6B869C;
}

.modal-dialog-message {
  display: flex;
  font-size: 1.4rem;
  max-width: 60rem;
}

.modal-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
}

</style>