<script setup lang="ts">
import { computed, ref, PropType } from 'vue';
import FormCheckRadio from '@/Components/FormCheckRadio.vue';
// import BaseButton from '@/Components/BaseButton.vue';
// import FormControl from '@/Components/FormControl.vue';

const props = defineProps({
    options: {
        type: Object,
        default: () => { },
    },
    allowManualAdding: {
        type: Boolean,
        default: false,
    },
    manualAddingPlaceholder: {
        type: String,
        default: 'Add manually',
        required: false,
    },
    name: {
        type: String,
        required: true,
    },
    type: {
        type: String as PropType<'checkbox' | 'radio' | 'switch'>,
        default: 'checkbox',
        validator: (value: string) => ['checkbox', 'radio', 'switch'].includes(value),
    },
    componentClass: {
        type: String,
        default: null,
    },
    isColumn: Boolean,
    modelValue: {
        type: [Array, String, Number, Boolean, Object],
        default: null,
    },
});
const emit = defineEmits(['update:modelValue']);
const computedValue = computed({
    // get: () => props.modelValue,
    get: () => {
        // const ids = props.modelValue.map((obj) => obj.id);
        // return ids;
        if (Array.isArray(props.modelValue)) {
            if (props.modelValue.every((item) => typeof item === 'number')) {
                return props.modelValue;
            } else if (props.modelValue.every((item) => hasIdAttribute(item))) {
                const ids = props.modelValue.map((obj) => obj.id);
                return ids;
            }
            return props.modelValue;
        }
        // return props.modelValue;
    },
    set: (value) => {
        emit('update:modelValue', value);
    },
});

// Define a type guard to check if an object has an 'id' attribute
// function hasIdAttribute(obj: any): obj is { id: any } {
//   return typeof obj === 'object' && 'id' in obj;
// }

const hasIdAttribute = (obj: any): obj is { id: any } => {
    return typeof obj === 'object' && 'id' in obj;
};

const newOption = ref<string>('');
const addOption = () => {
    if (newOption.value && !props.options[newOption.value]) {
        props.options[newOption.value] = newOption.value;
        newOption.value = '';
    }
};

const inputElClass = computed(() => {
    const base = [
        'px-3 py-2 max-w-full border-gray-700 rounded w-full',
        'dark:placeholder-gray-400',
        'h-12',
        'border',
        'bg-transparent'
        // props.isReadOnly ? 'bg-gray-50 dark:bg-slate-600' : 'bg-white dark:bg-slate-800',
    ];
    // if (props.icon) {
    // base.push('pl-10');
    // }
    return base;
});
</script>

<template>
    <div class="flex justify-start flex-wrap -mb-3" :class="{ 'flex-col': isColumn }">
        <!-- :input-value="key" -->
        <!-- :label="value" -->
        <!-- :input-value="value.id"
      :label="value.name" -->
        <div v-if="allowManualAdding && type === 'checkbox'" class="flex items-center mt-2 mb-2 relative">
            <input v-model="newOption" :placeholder="manualAddingPlaceholder" :class="inputElClass"
                @keydown.prevent.enter="addOption" />
            <svg v-show="newOption.length >= 2" @click.prevent="addOption" xmlns="http://www.w3.org/2000/svg"
                class="w-6 h-6 absolute right-2 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500"
                viewBox="0 0 24 24" fill="currentColor">
                <path
                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-6H5v-2h6V5h2v6h6v2h-6v6z" />
            </svg>
        </div>
        <FormCheckRadio v-for="(value, key) in options" :key="key" v-model="computedValue" :type="type"
            :name="name" :input-value="Number(key)" :label="value" :class="componentClass" />
    </div>
</template>
