<template>
  <div
    :class="[
      cn.b(),
      cn.is('checked', checked),
      cn.is('invalid', invalid),
      cn.is('disabled', disabled),
      cn.is('focused', focused),
      cn.has('label', hasLabel),
    ]"
  >
    <label :class="[cn.e('wrapper')]">
      <input
        :name="id"
        :class="[cn.e('input')]"
        type="checkbox"
        :disabled="disabled"
        :checked="checked"
        @focus="focused = true"
        @blur="focused = false"
        @change="handleChange"
      >

      <UiIconSCheck :class="[cn.e('checkmark')]" />

      <p :class="[cn.e('label')]">
        <slot>{{ label }}</slot>
      </p>
    </label>
  </div>
</template>

<script setup lang="ts">
import { useSlots } from 'vue'
import useClassname from '../../composables/use-classname'

export interface Props {
  id: string
  label?: string
  disabled?: boolean
  modelValue?: boolean | string | number
  trueValue?: boolean | string | number
  falseValue?: boolean | string | number
  required?: boolean
}

defineOptions({
  name: 'UiCheckbox',
})

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  trueValue: true,
  falseValue: false,
  required: false,
  modelValue: undefined,
})

defineEmits<{
  'update:modelValue': [state: boolean | string | number]
  focus: []
  blur: []
}>()

const slots = useSlots()

const cn = useClassname('ui-checkbox')

const { checked, invalid, focused, hasLabel, handleChange } = useCheckbox(props, slots)
</script>

<style lang="scss">
@use 'styles';
</style>
