<template>
  <div>
    <slot name="initialSlot"></slot>
    <button
      v-if="type == 'tertiary'"
      :class="[
        'flex h-9 cursor-pointer flex-row rounded-md px-2 py-2 text-sm text-indigo-600 hover:bg-indigo-100 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed',
        customButtonClasses,
      ]"
      @click.prevent="$emit('action')"
      :disabled="disabled"
      :id="id"
    >
      <c-icon
        :cursorType="computedIconCursorType"
        v-if="icon"
        :type="icon.type"
        :class="icon.class"
        :name="icon.name"
        :viewBox="icon.viewBox"
      ></c-icon>
      <slot></slot>
    </button>
    <button
      v-else-if="type == 'rounded-hover'"
      @click.prevent="$emit('action')"
      class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
      :class="[
        isTransparent ? 'bg-transparent' : 'bg-white',
        customButtonClasses,
      ]"
      :disabled="disabled"
      :id="id"
    >
      <c-icon
        v-if="icon"
        :cursorType="computedIconCursorType"
        :type="icon.type"
        :class="icon.class"
        :name="icon.name"
        :viewBox="icon.viewBox"
      ></c-icon>
    </button>
    <button
      v-else
      :type="type"
      class="inline-flex h-9 items-center px-2 py-2 text-sm font-medium shadow-sm rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
      :class="[classes, customButtonClasses]"
      :disabled="disabled"
      :id="id"
      :style="computedStyles"
      @click.prevent="$emit('action')"
    >
      <c-icon
        v-if="isLoading"
        :cursorType="computedIconCursorType"
        class="mr-2 h-5 w-5"
        :class="loaderClasses"
        name="loader"
      ></c-icon>
      <c-icon
        v-if="icon"
        :type="icon.type"
        :class="icon.class"
        :name="icon.name"
        :viewBox="icon.viewBox"
        :cursorType="computedIconCursorType"
      ></c-icon>
      <slot></slot>
    </button>
  </div>
</template>

<script>
import { COLOR_CONFIG } from "../../colorConfig";
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CButtonIcon",
  components: { CIcon },
  props: {
    icon: {
      type: Object,
    },
    type: {
      type: String,
      default: "primary",
      required: true,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    action: {
      type: Function,
    },
    loaderClasses: {
      type: String,
    },
    id: {
      type: String,
    },
    isTransparent: {
      type: Boolean,
      default: false,
    },
    customButtonClasses: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    preferredColor: {
      type: String,
      default: "indigo",
    },
  },

  computed: {
    classes() {
      return {
        "text-gray-700 border bg-white border-gray-300 hover:bg-gray-50 white-button-classes":
          this.type == "white",
        "text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500":
          this.type == "secondary",
        "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
          this.type == "primary",
        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
          this.type == "danger",
        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
          this.type == "success",
        "text-gray-900 hover:bg-gray-200 bg-gray-100":
          this.type == "secondary-gray",
        "bg-gray-900 text-white hover:bg-gray-800 focus:ring-gray-700":
          this.type == "dark-blue",
        "text-gray-700 bg-white shadow-none hover:bg-gray-100 white-button-classes":
          this.type == "white-plain",
        "cursor-default pointer-events-none": this.isLoading,
      };
    },
    computedStyles() {
      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
      return {
        "--primary-ring-color": colors.shade600,
      };
    },
    computedIconCursorType() {
      return this.disabled ? "cursor-not-allowed" : "cursor-pointer";
    },
  },

  methods: {
    onClick() {
      this.$emit("onClick");
    },
  },
};
</script>

<style scoped>
/* white button classes */
.white-button-classes:focus {
  outline-color: var(--primary-ring-color);
}
</style>
