<template>
  <div class="pui-label" @click="toggleState">
    <div
      :disabled="disabled"
      class="pui-checkbox"
      :class="[type, size, {
        'checked': computedValue,
      }]"
    >
      <i class="pui-mark mdi mdi-check"></i>
    </div>
    <span v-if="label">{{ label }}</span>
  </div>
</template>

<script>
export default {
  name: "PCheckbox",
  props: {
    type: String,
    label: String,
    size: String,
    value: Boolean,
    disabled: Boolean,
  },
  data() {
    return {
      newValue: this.value
    }
  },
  methods: {
    toggleState() {
      if (!this.disabled) {
        this.computedValue = !this.computedValue
      }
    }
  },
  computed: {
    computedValue: {
      get() {
        return this.newValue
      },
      set(value) {
        this.newValue = value
        this.$emit('input', value)
      }
    }
  },
  watch: {
    value(value) {
      this.newValue = value
    }
  },
}
</script>