<script setup>
import { defineProps } from "vue";
import { twMerge } from "tailwind-merge";
/* --------------------------------------------------------------
options: [
  {
    key: unique,
    content: "",
    selected: true / false,
    disabled: true / false
  }
]
---------------------------------------------------------------- */

const props = defineProps({
  options: Array,
  name: String,
  Attribute: String,
  onChange: Function,
  selectClass: String,
  value: String || Number,
  isTopLabelExist: {
    type: Boolean,
    default: true,
  },
  isBottomLabelExist: {
    type: Boolean,
    default: true,
  },
  required: {
    type: Boolean,
    default: false,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <label class="form-control w-80 max-w-sm">
    <div :class="twMerge(isTopLabelExist ? 'label' : '')">
      <span class="label-text text-lg"><slot name="topLeft"></slot></span>
      <span class="label-text-alt"> <slot name="topRight"></slot></span>
    </div>
    <select
      :disabled="disabled"
      :name="name"
      :class="twMerge('select bg-transparent rounded-md text-lg', selectClass)"
      @change="
        (e) => {
          console.log(e.target.value);
          props.onChange && props.onChange(e.target.value);
        }
      "
      v-model="value[name]"
      :required="required"
      :readonly="readonly"
    >
      <option
        v-for="option in options"
        :key="option.key || option"
        :selected="option.selected"
        :disabled="option.disabled"
        :class="twMerge(disabled ? `text-white` : 'text-dark')"
        :value="option.value || option.key || option"
      >
        <span>
          {{ option[Attribute] || option }}
        </span>
      </option>
    </select>
    <div :class="twMerge(isBottomLabelExist ? 'label' : '')">
      <span class="label-text-alt"> <slot name="bottomLeft"></slot></span>
      <span class="label-text-alt"> <slot name="bottomRight"></slot></span>
    </div>
  </label>
</template>

<style lang="scss" scoped></style>
