<template>
  <div class="checkbox-playground row px-2">
    <div class="col">
      <v-checkbox v-model="indeterminate" label="Indeterminate" indeterminate />
    </div>
    <div class="col">
      <v-checkbox v-model="indeterminateReq" label="Indeterminate Required" indeterminate required />
    </div>
    <div class="col">
      <v-checkbox v-model="yesOrNo" label="Regular" />
    </div>
    <div class="col">
      <v-checkbox label="Label First" label-first />
    </div>
    <div class="col">
      <v-checkbox label="Toggle Switch" v-model="yesOrNo" toggle-switch />
    </div>
    <div class="col-col-12">
      <hr />
      <div class="row">
        <div class="col col-6">
          <v-radio-group :options="radioOptions" v-model="selectedRadio" name="gender" />
        </div>
        <div class="col col-6">
          <v-radio-group :options="radioOptions" v-model="selectedRadio" name="gender2" label-first />
        </div>
      </div>
    </div>
    <div class="col col-12">
      <hr />
      <v-radio-group :options="radioOptions" v-model="selectedRadio" name="gender3" inline />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { SelectOption } from '@/types/custom-types';
import { VCheckbox, VRadioGroup } from '../components';

const getDropDownItem = (text: string, val: string): SelectOption => {
  return { text, value: val, key: val };
};

const indeterminate = ref<boolean | null>(null);
const indeterminateReq = ref<boolean | null>(null);
const yesOrNo = ref(false);
const radioOptions = [
  getDropDownItem('Male', 'M'),
  getDropDownItem('Female', 'F'),
  getDropDownItem('Prefer not to say', 'N/A'),
];
const selectedRadio = ref('N/A');
</script>
