<template>
  <n-input :rules="rules" :value="value" :helper-text="helperText">
    <template #default>
      <div
        :class="['n-flex n-gap-2 n-align-start', fieldClasses, wrapperClass]"
        @click="onCheck"
      >
        <input
          v-bind="$attrs"
          :id="enhancedId"
          type="checkbox"
          class="n-base-checkbox-input n-px-1 n-py-2 n-radius-sm n-flex n-flex-column n-justify-center n-align-center"
          :value="value"
          :disabled="disabled"
          :checked="Boolean(value)"
        />

        <label v-if="label" :class="labelClasses" @click.stop="onCheck">
          {{ label }}
        </label>
      </div>
    </template>
  </n-input>
</template>

<script>
import { defineComponent } from "vue";
import { v4 as uuidv4 } from "uuid";
import NInput from "../NInput/n-input.vue";

export default defineComponent({
  name: "NCheckbox",
  components: {
    NInput,
  },
  inheritAttrs: false,
  props: {
    rules: {
      type: Array,
      default: () => [],
    },
    id: {
      type: String,
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    wrapperClass: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Boolean,
      default: false,
    },
    helperText: {
      type: String,
      default: "",
    },
  },
  computed: {
    enhancedId() {
      const { id } = this;

      return id || uuidv4();
    },
    isChecked() {
      return Boolean(this.value);
    },
    fieldClasses() {
      const { disabled, isChecked } = this;
      let classes = "pkg-base-n-checkbox";

      if (disabled) {
        classes += " n-checkbox--disabled";
      }

      if (isChecked) {
        classes += " n-checkbox--checked";
      }

      return classes;
    },
    labelClasses() {
      const classes =
        "n-base-checkbox-label n-color-main-font n-text-body2 n-font-normal";

      return classes;
    },
  },
  methods: {
    onCheck() {
      console.log("cli", !this.value);
      this.$emit("input", !this.value);
    },
  },
});
</script>

<style scoped>
@import url("./n-checkbox.css");
</style>
