<template>
  <BmsInputToggle label="Loading" name="loading" v-model="loading" />
  <BmsInputToggle label="Small" name="small" v-model="small" />
  <BmsForm>
    <template #section1>
      <h2>Formulaire statique aux options dynamiques</h2>
      <BmsSelect
        label="Select"
        v-model="select"
        :loading="loading"
        :small="small"
        :options="selectOptions"
      />
      <BmsAutocomplete
        label="Autocomplete"
        v-model="autocomplete"
        :loading="loading"
        :small="small"
        :options="autocompleteOptions"
      />
      <BmsInputText
        label="Text"
        v-model="autocomplete"
        :loading="loading"
        :small="small"
      />
      <BmsInputBooleanCheckbox
        :model-value="false"
        :loading="loading"
        :small="small"
        label="boolean"
        name="boolean"
        label-value="oui"
      />
      <BmsInputRadioCaptionGroup
        :loading="loading"
        :small="small"
        label="Radio Buttons"
        v-model="radio"
        :options="[
          { value: 'tata', label: 'Tata', captions: ['Caption'] },
          { value: 'titi', label: 'Titi', captions: ['Caption'] },
          { value: 'toto', label: 'Toto', captions: ['Caption'] },
          { value: 'tutu', captions: ['Caption'] },
        ]"
        :captions="loading ? [] : ['this is a question']"
        required
      />
    </template>
  </BmsForm>
</template>

<script setup lang="ts">
import BmsAutocomplete from '@/components/form/BmsAutocomplete.vue';
import BmsInputBooleanCheckbox from '@/components/form/BmsInputBooleanCheckbox.vue';
import BmsInputRadioCaptionGroup from '@/components/form/BmsInputRadioCaptionGroup.vue';
import BmsInputText from '@/components/form/BmsInputText.vue';
import BmsInputToggle from '@/components/form/BmsInputToggle.vue';
import BmsSelect from '@/components/form/BmsSelect.vue';
import BmsForm from '@/components/layout/BmsForm.vue';
import { InputOption } from '@/models';
import { ref } from 'vue';

const loading = ref(true);
const small = ref(true);
const select = ref([]);
const autocomplete = ref('');

const selectOptions = ref<InputOption[]>([
  { label: 'label 1', value: 1 },
  { label: 'label 2', value: 2 },
]);
const autocompleteOptions = ref<InputOption[]>([
  { label: 'label 1', value: 1 },
  { label: 'label 2', value: 2 },
]);
const radio = ref('toto');
</script>
