<template>

  <v-defaults-provider :defaults="defaults">
    <v-container class="pa-md-12">
      <v-select :items="['md1', 'md2', 'md3']" label="Blueprint" clearable v-model="select"></v-select>
      <v-row>
        <v-col cols="12">
          <v-text-field :error-messages="['Required']" label="Text field" ></v-text-field>
        </v-col>

        <v-col cols="12">
          <v-textarea :error-messages="['Required']" label="Textarea"></v-textarea>
        </v-col>

        <v-col cols="12">
          <v-select :error-messages="['Required']" label="Select"></v-select>
        </v-col>

        <v-col cols="12">
          <v-combobox :error-messages="['Required']" label="Combobox"></v-combobox>
        </v-col>

        <v-col cols="12">
          <v-radio-group :error-messages="['Required']" label="Combobox">
            <v-radio label="Option 1" value="option1"></v-radio>
            <v-radio label="Option 2" value="option2"></v-radio>
            <v-radio label="Option 3" value="option3"></v-radio>
          </v-radio-group>
        </v-col>

        <v-col cols="12">
          <v-checkbox :error-messages="['Required']" label="Combobox"></v-checkbox>
        </v-col>

        <v-col cols="12">
          <v-switch :error-messages="['Required']" label="Combobox"></v-switch>
        </v-col>

        <v-col cols="12">
          <v-slider :error-messages="['Required']"></v-slider>
        </v-col>

        <v-col cols="12">
          <v-range-slider :error-messages="['Required']"></v-range-slider>
        </v-col>
      </v-row>
    </v-container>
  </v-defaults-provider>
</template>

<script setup>
  import { computed, ref } from 'vue'
  import { md1, md2, md3 } from '../src/blueprints/index'

  const select = ref()

  const defaults = computed(() => {
    if (select.value === 'md1') {
      console.log(md1.defaults)
      return md1.defaults
    } else if (select.value === 'md2') {
      return md2.defaults
    } else if (select.value === 'md3') {
      return md3.defaults
    }

    return {}
  })
</script>