<template>
  <div class="submit-cancel-buttons">
    <button
      v-if="!hideCancel"
      ref="cancelBtn"
      type="button"
      class="btn btn-secondary"
      data-dismiss="modal"
      :class="{ 'btn-sm': small, only: hideSubmit }"
      @click="cancel()"
    >
      {{ cancelText }}
    </button>
    <button
      v-if="!hideSubmit"
      ref="submitBtn"
      type="button"
      class="btn btn-primary"
      :class="{ 'btn-sm': small, only: hideCancel }"
      @click="submit()"
    >
      {{ submitText }}
    </button>
  </div>
</template>

<script lang="ts">
import { ref, SetupContext } from 'vue';
import { getSubmitCancelProps, submitCancelEventNames, getSubmitCancelEmits } from '@/models/submit-cancel';

const emits = getSubmitCancelEmits();
const props = getSubmitCancelProps();

export default {
  emits,
  props,
  setup(_, ctx: SetupContext<any>) {
    const submitBtn = ref<any>(null);
    const cancelBtn = ref<any>(null);
    const cancel = () => {
      ctx.emit(submitCancelEventNames.cancel);
      if (!!cancelBtn.value?.blur && typeof cancelBtn.value.blur === 'function') {
        cancelBtn.value.blur();
      }
    };
    const submit = () => {
      ctx.emit(submitCancelEventNames.submit);
      if (!!submitBtn.value?.blur && typeof submitBtn.value.blur === 'function') {
        submitBtn.value.blur();
      }
    };
    return { cancel, submit, submitBtn, cancelBtn };
  },
};
</script>

<style lang="scss">
.submit-cancel-buttons {
  .btn-secondary {
    &:not(.only) {
      margin-right: 0.5rem;
    }
  }
}
</style>
