<script lang="ts" setup>
import { ref } from 'vue';
import QuatationForm from './QuatationForm.vue';
import SideMenu from 'components/SideMenu.vue';
import ImageUploadDialog from 'components/ImageUploadDialog.vue';
import { watch } from 'vue';

const isOpen = ref(true);
const imageUploadDialog = ref<InstanceType<typeof ImageUploadDialog>>();
const file = ref<File | null>(null);
</script>

<template>
  <ImageUploadDialog
    v-model:dialog-state="isOpen"
    v-model:file="file"
    ref="imageUploadDialog"
    clear-button
  >
    <template #error>
      <div style="display: flex; align-items: center; justify-content: center">
        <h1>Fallback</h1>
      </div>
    </template>
  </ImageUploadDialog>

  <button @click="isOpen = !isOpen">Open</button>
  <button @click="imageUploadDialog?.browse()">Click Me</button>
  <div
    style="
      height: 100vh;
      background: green;
      width: 100%;
      color: white;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    "
    id="aaa"
  >
    My AAA
  </div>
  <div
    style="
      height: 100vh;
      background: red;
      width: 100%;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    "
    id="my-anchor"
  >
    My Menu
  </div>
  <QuatationForm v-model:dialog-state="isOpen" />
</template>

<style scoped></style>
