<template>
  <focus-trap :active="true" :escapeDeactivates="false">
    <div
      v-scroll-lock="true"
      id="confirm-action-modal"
      class="fixed inset-0 z-100 overflow-y-auto"
    >
      <div
        class="flex min-h-screen items-end justify-center pt-4 pb-20 text-center sm:block sm:p-0 sm:px-4"
        @click="shouldBlur ? $emit('close') : null"
      >
        <transition
          enter-active-class="ease-out duration-300"
          enter-class="opacity-0"
          enter-to-class="opacity-100"
          leave-active-class="ease-in duration-200"
          leave-class="opacity-100"
          leave-to-class="opacity-0"
        >
          <div class="fixed inset-0 transition-opacity" aria-hidden="true">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
          </div>
        </transition>

        <!-- This element is to trick the browser into centering the modal contents. -->
        <span
          class="hidden align-middle sm:inline-block sm:h-screen"
          aria-hidden="true"
          >&#8203;</span
        >
        <transition
          enter-active-class="ease-out duration-300"
          enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          enter-to-class="opacity-100 translate-y-0 sm:scale-100"
          leave-active-class="ease-in duration-200"
          leave-class="opacity-100 translate-y-0 sm:scale-100"
          leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        >
          <div
            class="inline-block w-full transform overflow-y-visible rounded-lg bg-white text-left align-middle shadow-xl transition-all sm:my-8 sm:max-w-sm md:max-w-2xl"
            role="dialog"
            aria-modal="true"
            aria-labelledby="modal-title"
            :aria-describedby="ariaDescribedby"
            :aria-busy="loadButton"
            @click.stop
          >
            <div
              class="modal-content flex items-center gap-4 overflow-y-auto px-6 pt-6 pb-4"
            >
              <div
                aria-hidden="true"
                class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-red-100"
              >
                <c-icon
                  name="exclamation-triangle-outline-v2"
                  type="outline-v2"
                  class="h-6 w-6 text-red-600"
                  viewBox="0 0 24 24"
                ></c-icon>
              </div>
              <div class="flex-1">
                <h3
                  id="modal-title"
                  class="text-base font-medium text-gray-900"
                >
                  {{ title }}
                  <span v-if="isRequired" class="text-red-600" aria-hidden="true">*</span>
                  <span v-if="isRequired" class="sr-only">(required)</span>
                </h3>
                <div class="text-sm text-gray-500">
                  <p id="modal-message">{{ message }}</p>
                  <p
                    v-if="description"
                    id="modal-description"
                    class="mt-1 text-gray-500"
                  >
                    {{ description }}
                  </p>
                  <slot name="description"></slot>
                </div>
                <div class="mt-2" v-if="isTextAreaEnabled">
                  <c-textarea
                    class="flex-grow"
                    :label="textAreaLabel"
                    :hint="textAreaHint"
                    :value="textValue"
                    :isValidate="isTextValid"
                    :disabled="false"
                    :helpText="textAreaHelperText"
                    :errorMessage="errorMessage"
                    @input="handleTextAreaInputChange"
                  ></c-textarea>
                </div>
              </div>
            </div>
            <div
              class="flex items-center justify-end gap-3 rounded-b-lg border-t border-gray-200 bg-gray-100 px-6 py-3"
            >
              <c-button
                v-if="!hideActionOne"
                id="cancel-button"
                :type="actionOneType"
                :label="actionOneLabel"
                @action="$emit('action-one')"
              ></c-button>
              <c-button
                id="confirm-button"
                :type="actionTwoType"
                :label="actionTwoLabel"
                :isLoading="loadButton"
                :disabled="loadButton"
                :aria-busy="loadButton"
                @action="$emit('action-two')"
              ></c-button>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </focus-trap>
</template>

<script>
import CButton from "../CButton";
import CIcon from '../CIcon/CIcon.vue';
import CTextarea from "../CTextarea";
export default {
  name: "CConfirmActionModal",
  components: {
    CButton,
    CTextarea,
    CIcon,
  },
  props: {
    title: {
      type: String,
      default: "Are you sure?",
    },
    message: {
      type: String,
      default: "",
    },
    description: {
      type: String,
    },
    actionOneLabel: {
      type: String,
      default: "Cancel",
    },
    actionTwoLabel: {
      type: String,
      default: "Confirm",
    },
    actionOneType: {
      type: String,
      default: "white",
    },
    actionTwoType: {
      type: String,
      default: "danger",
    },
    loadButton: {
      type: Boolean,
      default: false,
    },
    hideActionOne: {
      type: Boolean,
      default: false,
    },
    isRequired: {
      type: Boolean,
      default: false,
    },
    //props for c-textarea
    isTextAreaEnabled: {
      type: Boolean,
      default: false,
    },
    textValue: {
      type: String,
    },
    isTextValid: {
      type: Boolean,
      default: false,
    },
    textAreaHelperText: {
      type: String,
    },
    errorMessage: {
      type: String,
    },
    shouldBlur: {
      type: Boolean,
      default: false,
    },
    textAreaHint: {
      type: String,
    },
    textAreaLabel: {
      type: String,
    },
  },
  computed: {
    ariaDescribedby() {
      return this.description
        ? "modal-message modal-description"
        : "modal-message";
    },
  },
  methods: {
    handleTextAreaInputChange(value) {
      this.$emit("input-value-change", value);
    },
  },
};
</script>
<style scoped>
.modal-content {
  max-height: calc(100vh - 200px);
}
</style>