<script setup>
  import { ref } from 'vue';
  import BaseSelect from '@/components/select/BaseSelect.vue'
  import BaseCheckbox from "@/components/checkbox/BaseCheckbox.vue";

  const options = [
    { value: 1, label: 'Option #1', disabled: false},
    { value: 2, label: 'Option #2', disabled: false},
    { value: 3, label: 'Option #3', disabled: false},
  ]

  const selectedOption = ref(1)
  let selectedObject = ref(undefined)
  let disabled = ref(false)

  const initializeSelection = function (value) {
    console.log('BaseSelect loaded', value)
    selectedObject.value = value
  }

  const handleChange = function (value) {
    console.log('BaseSelect changed', value)
    selectedObject.value = value
  }
</script>

<template>
  <div class="grid gap-4">
    <div class="p-3 border border-info text-info
      focus-within:ring-2 focus-within:ring-info
      focus-within:rounded focus-within:ring-opacity-50"
    >
      <BaseSelect
          class="w-full focus:outline-none"
          :options="options"
          v-model="selectedOption"
          :disabled="disabled"
          @load="initializeSelection"
          @change="handleChange"
      />
    </div>

    <div class="flex gap-8">
      <label>
        <BaseCheckbox v-model="disabled" /> Disabled
      </label>
    </div>

    <div class="grid gap-2 p-4 bg-ui-gray-50 border rounded">
      <div>v-model: {{ selectedOption }}</div>
      <div>@change: {{ selectedObject }}</div>
    </div>
  </div>
</template>

