<template>
  <div class="grid grid-cols-2 gap-4">
    <div class="grid gap-6">
      <AisField label="Content">
        <AisInput v-model="content" size="sm"/>
      </AisField>

      <AisField label="Placement">
        <AisSelect v-model="placement" size="sm" :options="placements"/>
      </AisField>

      <AisField label="Triggers">
        <AisCheckboxGroup v-model="triggers" :options="['hover', 'click', 'focus']"/>
      </AisField>

      <AisField label="Arrow">
        <AisToggle v-model="arrow" size="sm"/>
      </AisField>
    </div>

    <div class="flex self-stretch bg-gray-100 items-center justify-center">
      <AisButton ref="completeButton" variant="secondary" size="md" font="sans">Complete Example</AisButton>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue"
import AisButton from "@/components/button/AisButton.vue";
import AisField from "@/components/field/AisField.vue";
import AisInput from "@/components/input/AisInput.vue";
import AisSelect from "@/components/select/AisSelect.vue";
import AisCheckboxGroup from "@/components/checkbox-group/AisCheckboxGroup.vue";
import AisToggle from "@/components/toggle/AisToggle.vue";
import { useAisTooltip } from "@/composables/tooltip";

const completeButton = ref()

const content = ref('This is my complete example!')
const placement = ref('top')
const triggers = ref(['hover'])
const arrow = ref(true)

const placements = ref([
  'top', 'top-start', 'top-end',
  'right', 'right-start', 'right-end',
  'bottom', 'bottom-start', 'bottom-end',
  'left', 'left-start', 'left-end',
])


const options = computed(() => {
  return {
    content: content.value,
    placement: placement.value,
    triggers: triggersString.value,
    arrow: arrow.value,
  }
})

const triggersString = computed(() => triggers.value.join(' '))

let tooltip = useAisTooltip(completeButton, options.value)

watch(options, (value) => {
  tooltip.refresh(value)
})

</script>

<script>
export default {
  name: "AisTooltipCompleteExample",
}
</script>