<template>
  <div class="wrapper-checkbox">
    <div class="input-checkbox">
      <i v-if="isChecked && !isIndeterminate" class="icon bi bi-check-square" />
      <i v-if="!isChecked && !isIndeterminate" class="icon bi bi-square" />
      <i v-if="isIndeterminate && !isChecked" class="icon bi bi-dash-square" />
      <input
        id="checkbox"
        v-model="inputValue"
        type="checkbox"
        @input="updateValue(!inputValue)"
        class="input"
      />
    </div>
    <label v-if="label && label.length" for="checkbox" class="label">{{
      label
    }}</label>
  </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import type { CheckboxInterface } from '@/views/interfaces/MySequenceView'
const emit = defineEmits<{ (e: 'trigger', value: CheckboxInterface): void }>()
const props = defineProps({
  name: { type: String, default: null },
  label: { type: String, default: '' },
  isChecked: { type: Boolean, default: false },
  isIndeterminate: { type: Boolean, default: false }
})
let inputValue = ref<boolean>(props.isChecked)
const htmlCheckbox = <HTMLInputElement>document.getElementById('checkbox')

watchEffect(async () => {
  if (htmlCheckbox) {
    htmlCheckbox.indeterminate = props.isIndeterminate
  }
})

function updateValue(value: boolean): void {
  if (htmlCheckbox) {
    htmlCheckbox.indeterminate = false
  }
  inputValue.value = value
  emit('trigger', { isChecked: value, isIndeterminate: false })
}
</script>

<style lang="scss" scoped>
.input-checkbox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: toRem(2);
  width: toRem(2);
}
.input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  cursor: pointer;
  position: absolute;
  height: 100%;
  width: 100%;
}
.icon {
  font-size: toRem(2);
  position: absolute;
  color: var(--grey-semi-dark);
}
.wrapper-checkbox {
  display: flex;
  align-items: center;
}
.label {
  cursor: pointer;
  margin-left: toRem(0.5);
}
</style>
