<script>
import { defineStore } from 'pinia'
import {ref, computed} from 'vue'

// You can name the return value of `defineStore()` anything you want, but it's best to use the name of the store and surround it with `use` and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
// the first argument is a unique id of the store across your application

export const mainStore = defineStore('store', () => {
  const isOpen = ref(false)
  const modal = ref(false)
  const promo_display = []

  function changeGallery(isopen, n, val, promo) {
    modal.value = val
    if (n == 0) {
        isOpen.value = !isopen
    } 
    console.log("promoo", promo)
    if (!(promo === null)) {
      promo_display.push(promo);
      if (promo_display.length > 1) {
        promo_display.shift();
      }
      console.log("promo: ", promo_display[0]);
    }
  }

  return { isOpen, modal, changeGallery, promo_display}
})
</script>