import type { PropType } from 'vue';
import { defineComponent, ref, watch, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@store/UserStore'
import { useQuasar } from 'quasar'
import type { IImgGallery } from 'model';
import { IGallery } from 'model'
import { CMyPage } from '@/components/CMyPage'
import { tools } from '@tools'
import { useGlobalStore } from '@store/globalStore'
import { costanti } from '@costanti'

export default defineComponent({
  name: 'CGalleryImages',
  props: {
    imgGallery: {
      type: Object as PropType<IImgGallery[] | string | undefined | null>,
      required: true,
    },
    directory: {
      type: String,
      required: true,
    }
  },
  components: { CMyPage },
  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()
    const userStore = useUserStore()
    const globalStore = useGlobalStore()

    const slide = ref(0)
    const autoplay = ref(5000)

    const dialogVisible = ref(false);
    const selectedImage = ref(null);

    const showImage = (item: any) => {
      selectedImage.value = item;
      dialogVisible.value = true;
    };

    const closeDialog = () => {
      selectedImage.value = null;
      dialogVisible.value = false;
    }

    return {
      showImage,
      closeDialog,
      selectedImage,
      dialogVisible,
      tools,
      costanti,
      slide,
      autoplay,
      t,
    }
  }
})