<script setup lang="ts">
import { computed } from 'vue';

interface Props {
    name: string;
    type?: 'checkbox' | 'radio' | 'switch';
    label?: string | null;
    modelValue: Array<any> | string | number | boolean | null;
    inputValue: string | number | boolean;
}

const props = defineProps<Props>();

const emit = defineEmits<{ (e: 'update:modelValue', value: Props['modelValue']): void }>();

const computedValue = computed({
    get: () => props.modelValue,
    set: (value) => {
        emit('update:modelValue', props.type === 'radio' ? [value] : value);
    },
});

const inputType = computed(() => (props.type === 'radio' ? 'radio' : 'checkbox'));

// Define isChecked for radio inputs: it's true when the current modelValue equals the inputValue
const isChecked = computed(() => {
    if (Array.isArray(computedValue.value) && computedValue.value.length > 0) {
        return props.type === 'radio' 
            ? computedValue.value[0] === props.inputValue
            : computedValue.value.includes(props.inputValue);
    }
    return computedValue.value === props.inputValue;
});
</script>

<template>
    <label v-if="type === 'radio'" :class="[type]"
        class="mr-6 mb-3 last:mr-0 inline-flex items-center cursor-pointer relative">
        <input v-model="computedValue" :type="inputType" :name="name" :value="inputValue"
            class="absolute left-0 opacity-0 -z-1 focus:outline-none focus:ring-0"
            :checked="isChecked" />
        <span class="check border transition-colors duration-200 dark:bg-slate-800 block w-5 h-5 rounded-full" :class="{
            'border-gray-700': !isChecked,
            'bg-radio-checked bg-no-repeat bg-center bg-lime-600 border-lime-600 border-4': isChecked
        }" />
        <span class="pl-2 control-label">{{ label }}</span>
    </label>

    <label v-else-if="type === 'checkbox'" :class="[type]"
        class="mr-6 mb-3 last:mr-0 inline-flex items-center cursor-pointer relative">
        <input v-model="computedValue" :type="inputType" :name="name" :value="inputValue" 
        class="absolute left-0 opacity-0 -z-1 focus:outline-none focus:ring-0" />
        <span class="check border transition-colors duration-200 dark:bg-slate-800 block w-5 h-5 rounded" :class="{
            'border-gray-700': !isChecked,
            'bg-checkbox-checked bg-no-repeat bg-center bg-lime-600 border-lime-600 border-4': isChecked
        }" />
        <span class="pl-2 control-label">{{ label }}</span>
    </label>
</template>
