<script setup lang="ts">
import { ref } from 'vue';
import AllCustom from './all-custom/all-custom.vue';
import TutorialForm from './tutorial-form/index.vue';
import ZodForm from './zod-form/index.vue';

const selectedCity = ref('NY');
const loading = ref(false);
const cities = ref([
  { name: 'New York', code: 'NY' },
  { name: 'Rome', code: 'RM' },
  { name: 'London', code: 'LDN' },
  { name: 'Istanbul', code: 'IST' },
  { name: 'Paris', code: 'PRS' }
]);
const loadSelectedCity = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 2000);
};
const handleE = (eventName: string) => {
  return (...args: any[]) => {
    console.log('eventName :>> ', eventName);
    console.log('args :>> ', args);
  };
};

</script>

<template>
  <div class="page-wrapper p-4">
    <ZodForm v-if="false" />
    <TutorialForm v-if="false" />

    <!-- <div class="flex flex-col md:flex-row items-start p-4 gap-4"> -->
    <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
      <AllCustom />
    </div>
    <!-- </div> -->

    <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white mt-4">
      <Select
        v-model="selectedCity"
        :placeholder="loading ? 'Loading' : 'Select a City'"
        :loading="loading"
        class="w-full md:w-56"
        :options="cities"
        optionLabel="name"
        optionValue="code"
        @input="(e: any) => handleE('input')(e)"
        @value-change="(e) => handleE('value-change')(e)"
        @change="(e) => handleE('change')(e)"
        @blur="(e) => handleE('blur')(e)"
      ></Select>
      <Select
        :options="cities"
        class="w-full md:w-56"
      >
        <template #value="slotProps">{{ slotProps.value }}</template>
      </Select>
      <Button
        id="load-selected-city"
        label="Load Selected City"
        @click="loadSelectedCity"
      />
      {{ { selectedCity } }}
    </div>
  </div>
</template>
