<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({
    name: {
        type: String,
        required: true,
    },
    type: {
        type: String,
        default: 'checkbox',
        validator: (value: string) => ['checkbox', 'radio', 'switch'].includes(value),
    },
    label: {
        type: String,
        default: null,
    },
    modelValue: {
        type: [Array, String, Number, Boolean],
        default: null,
    },
    inputValue: {
        type: [String, Number, Boolean],
        required: true,
    },
});// const props = defineProps<Props>();

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

const computedValue = computed({
    get: () => props.modelValue,
    set: (value) => {
        // If type is radio, wrap the new value inside an array.
        if (props.type === 'radio') {
            emit('update:modelValue', [value]);
        } else {
            emit('update:modelValue', 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 (props.type === 'radio') {
    return Array.isArray(computedValue.value) &&
           computedValue.value.length > 0 &&
           computedValue.value[0] === props.inputValue;
  }
  return computedValue.value === props.inputValue;
});
</script>


<!-- <template>
    <label v-if="type == 'radio'" :class="[type, '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-gray-700 border transition-colors duration-200 dark:bg-slate-800  block w-5 h-5 rounded-full" 
        :class="{ 'bg-no-repeat bg-center bg-blue-600 border-blue-600 border-4': isChecked }"/>
        <span class="pl-2">{{ label }}</span>
    </label>
    <label v-else :class="[type, 'mr-6 mb-3 last:mr-0']">
        <input v-model="computedValue" :type="inputType" :name="name" :value="inputValue" />
        <span class="check" />
        <span class="pl-2">{{ label }}</span>
    </label>   
</template> -->

<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-blue-600 border-blue-600 border-4': isChecked
        }" />
        <span class="pl-2">{{ label }}</span>
    </label>

    <label v-else class="mr-6 mb-3 last:mr-0" :class="[type]">
        <input v-model="computedValue" :type="inputType" :name="name" :value="inputValue" />
        <span class="check" />
        <span class="pl-2">{{ label }}</span>
    </label>
</template>
