<template>
  <div class="z-100 fixed inset-0 overflow-y-auto">
    <div
      class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
      @click="$emit('proceedAddingEvent', false)"
    >
      <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 sm:inline-block sm:h-screen sm:align-middle"
        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 transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 ${parentWrapperClass}`"
          role="dialog"
          aria-modal="true"
          aria-labelledby="modal-headline"
          @click.stop
        >
          <div class="sm:flex sm:items-start" :style="`${contentWrapperStyle}`">
            <div
              class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10"
              :class="`bg-${alertModalColor}-100`"
            >
              <svg
                :class="`h-6 w-6 text-${alertModalColor}-600`"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
                />
              </svg>
            </div>
            <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
              <h3
                :class="`text-base font-semibold leading-6 text-gray-900 ${titleClass}`"
                id="modal-title"
              >
                {{ title }}
              </h3>
              <div class="mt-2">
                <p class="text-sm text-gray-500">{{ msg }}</p>

                <p class="mt-4 text-sm text-gray-500">{{ msg2 }}</p>
              </div>
            </div>
          </div>
          <div
            :class="`mt-4 items-center justify-end gap-4 sm:ml-10 sm:flex ${btnWrapperClass}`"
          >
            <c-button
              v-if="secondaryButtonText"
              :type="secondaryButtonType"
              :label="secondaryButtonText"
              :id="getActionIDFn(secondaryButtonText)"
              @action="$emit('proceedAddingEvent', false)"
            ></c-button>
            <c-button
              v-if="primaryButtonText"
              :type="primaryButtonType"
              :label="primaryButtonText"
              :isLoading="primaryButtonLoader"
              :id="getActionIDFn(secondaryButtonText)"
              @action="$emit('proceedAddingEvent', true)"
            ></c-button>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import { getActionID } from "../../helper";
import CButton from "../CButton/CButton.vue";
export default {
  name: "CAlertModal",
  components: { CButton },
  props: {
    proceedAddingEvent: {
      type: Function,
    },
    titleClass: {
      type: String,
      default: "",
    },
    btnWrapperClass: {
      type: String,
      default: "",
    },
    parentWrapperClass: {
      type: String,
      default: "",
    },
    contentWrapperStyle: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "Outside working hour",
    },
    iconColor: {
      type: String,
      default: "",
    },
    msg: {
      type: String,
      default:
        "You are adding an event outside of the working hours. Are you sure wish to proceed?",
    },
    msg2: {
      type: String,
      default: "",
    },
    primaryButtonText: {
      type: String,
    },
    id: {
      type: String,
    },
    primaryButtonLoader: {
      type: Boolean,
    },
    secondaryButtonText: {
      type: String,
    },
    alertModalColor: {
      type: String,
      default: "yellow",
    },
    primaryButtonType: {
      type: String,
      default: "primary",
    },
    secondaryButtonType: {
      type: String,
      default: "white",
    },
  },
  methods: {
    getActionIDFn(name) {
      return getActionID(name, this.id);
    },
  },
};
</script>

<style>
.form-content {
  max-height: calc(100vh - 200px);
}
</style>
