<template>
  <div class="grid grid-cols-1 gap-8">
    <AisField class="col-span-1" label="Form Controls">
      <div class="grid gap-4 border rounded p-4 bg-ui-gray-50">
        <AisField label="Description">
          <AisInput size="sm" v-model="description" class="flex-grow" />
        </AisField>
        <AisField label="Error">
          <AisInput size="sm" v-model="errorMessage" class="flex-grow" />
        </AisField>
        <div class="flex gap-4">
          <AisCheckbox v-model="isRequired">Required</AisCheckbox>
          <AisCheckbox v-model="isDisabled">Disabled</AisCheckbox>
        </div>
      </div>
    </AisField>

    <AisField label="Text input"
              :description="description"
              :required="isRequired"
              :disabled="isDisabled"
              :errors="errorMessage"
    >
      <AisInput v-model="textInput" />
    </AisField>

    <AisField label="Select"
              :description="description"
              :required="isRequired"
              :disabled="isDisabled"
              :errors="errorMessage"
    >
      <AisSelect :options="options" v-model="select" />
    </AisField>

    <AisField label="Checkbox Group"
              :description="description"
              :required="isRequired"
              :disabled="isDisabled"
              :errors="errorMessage"
    >
      <AisCheckboxGroup :options="options" v-model="checkboxes" />
    </AisField>

    <AisField label="Radio Group"
              :description="description"
              :required="isRequired"
              :disabled="isDisabled"
              :errors="errorMessage"
    >
      <AisRadioGroup :options="options" v-model="radios" />
    </AisField>

    <AisField class="col-span-1" label="Textarea"
              :description="description"
              :required="isRequired"
              :disabled="isDisabled"
              :errors="errorMessage"
    >
      <AisTextarea v-model="textarea" />
    </AisField>
  </div>

</template>

<script setup>
import AisField from '@/components/field/AisField.vue'
import AisInput from '@/components/input/AisInput.vue'
import AisSelect from '@/components/select/AisSelect.vue'
import AisCheckbox from '@/components/checkbox/AisCheckbox.vue'
import AisCheckboxGroup from '@/components/checkbox-group/AisCheckboxGroup.vue'
import AisRadioGroup from '@/components/radio-group/AisRadioGroup.vue'
import AisTextarea from '@/components/textarea/AisTextarea.vue'

import {ref} from 'vue'

const isRequired = ref(false)
const isDisabled = ref(false)
const description = ref("Sic transit gloria mundi")
const errorMessage = ref("")

const options = ref(['Option 1', 'Option 2', 'Option 3'])

const textInput = ref('')
const select = ref('')
const checkboxes = ref([])
const radios = ref('Option 1')
const textarea = ref('')
</script>


