<template>
  <div>
    <div class="relative flex items-start">
      <div class="flex h-5 items-center">
        <input
          type="checkbox"
          v-model="checkedValue"
          @click="changeValue"
          :class="`checkbox-state focus cursor-pointer rounded border disabled:opacity-50 ${
            isValidate ? '' : 'error'
          }`"
          :style="colorStyles"
          :disabled="isDisabled"
          :indeterminate.prop="indeterminate"
          :id="id"
        />
      </div>
      <div
        class="flex cursor-pointer items-center text-sm"
        :class="[isDisabled ? 'pointer-events-none' : '', setMarginLeft]"
        :id="id"
        @click="changeValue"
      >
        <template v-if="showAvatar">
          <c-avatar
            class="mr-3"
            v-if="avatarImage"
            :size="description ? 'extrasmall' : 'extraextrasmall'"
            :image="avatarImage"
            :rounded="true"
          ></c-avatar>
          <c-avatar
            class="mr-3"
            :size="description ? 'extrasmall' : 'extraextrasmall'"
            :nameInitials="avatarNameInitials"
            :rounded="true"
            v-else
          ></c-avatar>
        </template>
        <div class="flex flex-col">
          <label
            :class="[
              'cursor-pointer text-gray-900',
              isDisabled ? 'opacity-50' : '',
              tag ? 'flex' : '',
              isNormalFont ? '' : 'font-medium',
              customLabelClass,
            ]"
            >{{ label }}
            <c-tag
              v-if="tag && Object.keys(tag).length !== 0"
              :label="tag.label"
              :color="tag.color"
              :class="tag.class"
              class="ml-2"
            />
          </label>
          <p
            v-if="description"
            :class="`mt-0.5 cursor-pointer text-gray-500 ${
              isDisabled ? 'opacity-50' : ''
            }`"
          >
            {{ description }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CTag from "../CTag/CTag.vue";
import CAvatar from "../CAvatar/CAvatar.vue";
import { COLOR_CONFIG } from "../../colorConfig";

export default {
  components: { CTag, CAvatar },
  name: "CCheckbox",
  props: {
    label: { type: String },
    id: { type: String },
    customLabelClass: {
      type: String,
    },
    description: { type: String },
    value: [Boolean, Number],
    isDisabled: {
      type: Boolean,
    },
    indeterminate: {
      type: Boolean,
    },
    tag: {
      type: Object,
    },
    permanentIndeterminate: {
      type: Boolean,
    },
    setMarginLeft: {
      type: String,
      default: "ml-3",
    },
    unCheckable: {
      type: Boolean,
    },
    checkable: {
      type: Boolean,
    },
    isNormalFont: {
      type: Boolean,
      default: false,
    },
    // validation is passed or not
    isValidate: { type: Boolean, default: true },
    preferredColor: { type: String, default: "indigo" },
    showAvatar: { type: Boolean, default: false },
    avatarImage: { type: String, default: null },
    avatarNameInitials: { type: String, default: null },
  },
  data() {
    return {
      checkedValue: this.value,
    };
  },
  computed: {
    colorStyles() {
      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
      return {
        "--checkbox-enabled-color": colors.shade600,
        "--checkbox-focus-color": colors.shade500,
      };
    },
  },
  methods: {
    changeValue(e) {
      let selectedValue = 0;
      if (this.permanentIndeterminate) {
        // can never be in any state other than dash
        e.preventDefault();
        if (this.checkedValue == 1) {
          selectedValue = 0;
        } else if (this.checkedValue == 0) {
          selectedValue = 1;
        } else {
          selectedValue = 2;
        }
      } else if (this.unCheckable) {
        // can never be in unchecked state
        if (this.checkedValue == 2) {
          selectedValue = 1;
        } else {
          selectedValue = 2;
        }
      } else if (this.checkable) {
        // can never be in a checked state
        if (this.checkedValue == 2) {
          selectedValue = 0;
        } else {
          selectedValue = 2;
        }
      } else {
        // normal check/uncheck
        if (this.checkedValue == 1) {
          selectedValue = 0;
        } else {
          selectedValue = 1;
        }
      }
      this.$emit("onChange", selectedValue);
    },
  },
  watch: {
    value() {
      this.checkedValue = this.value;
    },
  },
  mounted() {
    this.checkedValue = this.value;
  },
};
</script>
<style scoped>
.error {
  border-color: #dc2626 !important;
}

.checkbox-state {
  height: 1rem;
  width: 1rem;
}

.checkbox-state:checked {
  background-color: var(--checkbox-enabled-color) !important;
}

.checkbox-state:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--checkbox-focus-color) !important;
}
</style>
