<template>
    <div class="input checkbox" :style="{ width, height }" :class="{ disabled }">
        <input
            :id="id"
            :disabled="disabled"
            type="checkbox"
            class="replace-input"
            :checked="props.modelValue"
            @input="(ev:Event) => emit('update:modelValue', (ev.target as HTMLInputElement).checked)"
        />
        <span class="replace">
            <UIIcon :type="props.modelValue ? 'checkbox' : 'nor'" :size="props.width > props.height ? props.height : props.width" />
        </span>
    </div>
    <label v-if="props.label" class="label" :for="id">
        {{ props.label }}
    </label>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue'
import { randomId } from '@kankan/utils'
import UIIcon from '../../../icon/src/icon.vue'
import { checkboxInputProps } from './checkbox'
const props = defineProps(checkboxInputProps)
const emit = defineEmits(['update:modelValue'])
const id = randomId(4)

defineOptions({
    name: 'UICheckbox',
})
</script>
