<template>
    <div class="w-full  px-4" :class="size ? size : 'lg:w-6/12'">
        <div class="relative w-full mb-3" :class="subSectionClass">
            <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" :for="id" :class="labelClass"> {{ label }}
                <span class="text-red-600" v-if="required">*</span>
            </label>
            <select
                :class="inputClass"
                :id="id"
                :disabled="readonly"
                :required="required"
                :value="value"
                class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                @input="updateInput"
                @wheel="$event.target.blur()"
                :autofocus="autofocus"
            >
                <option value="">Select {{label}}</option>
                <template v-if="!group">
                    <option :value="option.value" v-for="(option , k) in options" :key="k" :selected="selcted == option.value">{{ option.label }}</option>
                </template>
                <template v-else>
                    <optgroup v-for="(group , g) in options" :key="g" :label="group.title">
                        <option :value="k" v-for="(option , k) in group.values" :key="k" :selected="selcted == option.k">{{ option.label }}</option>
                    </optgroup>

                </template>
            </select>
            <span v-if="error" class="text-red-600">{{error}}</span>
        </div>
    </div>
</template>

<script>
/**
 * @props mainSectionClass
 * @props subSectionClass
 * @props labelClass
 * @props inputClass
 * @props label
 * @props type
 * @props id
 * @props required
 * @props value
 * @props readonly
 */
export default {
    props:[
        "mainSectionClass",
        "subSectionClass",
        "labelClass",
        "inputClass",
        "label",
        "id",
        "required",
        "value",
        "readonly",
        'error',
        'autofocus',
        'size',
        'options' ,
        'selcted',
        'group'
    ],

    name: 'input',
    methods: {
        updateInput(event) {
            this.$emit("update:value", event.target.value);
        },
    },
}
</script>

<style scoped>
select:disabled{
    background-color: rgb(236, 236, 236);
}
</style>
