import { defineComponent, inject, computed } from 'vue';
import MdiCheckBold from './util/MdiCheckBold.vue';
const checkbox = defineComponent({
    name: 'Checkbox',
    props: {
        value: [String, Number, Boolean],
        checked: {
            type: Boolean,
            defalut: false,
            validator(value) {
                return typeof value == 'boolean';
            },
        },
        disabled: {
            type: Boolean,
            defalut: false,
        },
    },
    emits: ['update:checked'],
    setup(props, { slots, emit }) {
        const checkboxGroupContent = inject('checkboxGroupContent', undefined);
        const checkState = computed(() => {
            var _a;
            return (props.checked ||
                ((_a = checkboxGroupContent === null || checkboxGroupContent === void 0 ? void 0 : checkboxGroupContent.props) === null || _a === void 0 ? void 0 : _a.value.includes(props.value)));
        });
        const onClick = () => {
            emit('update:checked', !props.checked);
            checkboxGroupContent === null || checkboxGroupContent === void 0 ? void 0 : checkboxGroupContent.onCheckboxChange(props.value);
        };
        return () => {
            var _a;
            return (<div class={['u-checkbox', { 'u-checkbox-disabled': props.disabled }]} onClick={onClick}>
        <input type="checkbox" class={['u-checkbox-input']} value={props.value}></input>
        <div class={[
                    'u-checkbox-dot',
                    { 'u-checkbox-dot-checked': checkState.value },
                ]}>
          <MdiCheckBold />
        </div>
        <div class={['u-checkbox-label']}>{(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)}</div>
      </div>);
        };
    },
});
export default checkbox;