<template>
  <div class="flex flex-col gap-8">
    <div class="grid grid-cols-4 gap-12">
      <div class="col-span-3">
        <div class="grid grid-cols-3 gap-x-8 gap-y-4">
          <div>
            <AisField label="Variant:">
              <AisSelect v-model="selectedVariant" size="sm"
                         :options="['primary', 'secondary', 'default', 'info', 'success', 'warning', 'danger']"/>
            </AisField>
          </div>

          <div class="col-span-2">
            <AisField label="Alternate:">
              <AisToggle v-model="dropdownAlternate" class="mt-1.5"/>
            </AisField>
          </div>

          <div>
            <AisField label="Size:">
              <AisSelect v-model="selectedSize" size="sm" :options="['xs', 'sm', 'md', 'lg', 'xl']"/>
            </AisField>
          </div>
          <div>
            <AisField label="Font:">
              <AisSelect v-model="selectedFont" size="sm" :options="['caps', 'sans', 'serif']"/>
            </AisField>
          </div>
          <div>
            <AisField label="Rounded:">
              <AisSelect v-model="selectedRounded" size="sm" :options="['false', 'true', 'md', 'lg', 'full']"/>
            </AisField>
          </div>
        </div>
      </div>
      <div class="flex flex-col place-content-around">
        <div class="flex justify-between">
          <div>Block:</div>
          <div><AisToggle v-model="dropdownBlock"/></div>
        </div>
        <div class="flex justify-between">
          <div>Hover:</div>
          <div><AisToggle v-model="dropdownHover"/></div>
        </div>
        <div class="flex justify-between">
          <div>Fast:</div>
          <div><AisToggle v-model="dropdownFast"/></div>
        </div>
        <div class="flex justify-between">
          <div>Press:</div>
          <div><AisToggle v-model="dropdownPress"/></div>
        </div>
      </div>
    </div>

    <div>
      <div>
        <AisDropdown label="Dropdown"
                     :items="items"
                     :variant="selectedVariant"
                     :alternate="dropdownAlternate"
                     :size="selectedSize"
                     :font="selectedFont"
                     :rounded="dropdownRounded"
                     :block="dropdownBlock"
                     :hover="dropdownHover"
                     :press="dropdownPress"
                     :fast="dropdownFast"
        ></AisDropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue'
  import AisDropdown from "@/components/dropdown/AisDropdown.vue";
  import AisField from "@/components/field/AisField.vue";
  import AisSelect from "@/components/select/AisSelect.vue";
  import AisToggle from "@/components/toggle/AisToggle.vue";
  import { items } from "@/components/menu/examples/example-items";

  const selectedVariant = ref('secondary')
  const selectedSize = ref('md')
  const selectedFont = ref('sans')

  const dropdownAlternate = ref(false)
  const selectedRounded = ref('false')
  const dropdownBlock = ref(false)
  const dropdownHover = ref(false)
  const dropdownPress = ref(false)
  const dropdownFast = ref(false)

  const dropdownRounded = computed(() => {
    if(selectedRounded.value === 'false')
      return false
    else if (selectedRounded.value === 'true')
      return true;

    return selectedRounded.value;
  })
</script>

<script>
export default {
  name: "AisDropdownButtonOptions"
}
</script>