import { defineComponent, ref, toRef, computed, PropType, watch, onMounted, reactive, onBeforeUnmount } from 'vue'
import { useI18n } from '@src/boot/i18n'
import { useUserStore } from '@store/UserStore'
import { useGlobalStore } from '@store/globalStore'
import { useQuasar } from 'quasar'

import { CCatalogoCard } from '../CCatalogoCard'

import { func_tools, toolsext } from '@store/Modules/toolsext'

import { tools } from '@store/Modules/tools'
import { useProducts } from '@store/Products'

import { shared_consts } from '@src/common/shared_vuejs'
import { useRouter } from 'vue-router'

import { costanti } from '@costanti'
import { IOptCatalogo, IMyScheda, IProduct } from '@src/model'


export default defineComponent({
  name: 'CContainerCatalogoCard',
  emits: ['selauthor', 'update:modelValue'],
  props: {
    id: {
      type: String,
      required: false,
      default: '',
    },
    product: {
      type: Object as PropType<IProduct | null>,
      required: false,
      default: null,
    },
    cosa: {
      type: Number,
      required: false,
      default: 0,
    },
    complete: {
      type: Boolean,
      required: false,
      default: false,
    },
    options: {
      type: Object,
      required: false,
      default: () => { }
    },
    modelValue: {
      type: Object as PropType<IOptCatalogo>,
      required: true,
    },
    idPage: {
      type: String,
      required: false,
      default: '',
    },
    scheda: {
      type: Object as PropType<IMyScheda>,
      required: false,
      default: () => ({

      }),
    },
  },
  components: { CCatalogoCard },
  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()
    const userStore = useUserStore()
    const globalStore = useGlobalStore()

    const opendetailbool = ref(false)

    // Crea una copia locale reattiva di modelValue
    const optcatalogo = ref<IOptCatalogo>({ ...props.modelValue });

    // Watcher per sincronizzare le modifiche di modelValue
    watch(() => props.modelValue, (newVal) => {
      optcatalogo.value = { ...newVal };
      // updateCatalogoPadre()
    }, { deep: false });

    function updateCatalogoPadre() {
      emit('update:modelValue', optcatalogo.value);
    }

    // Metodo per aggiornare il valore del catalogo
    const updateCatalogo = (updatedCatalogo: IOptCatalogo) => {
      optcatalogo.value = updatedCatalogo; // Aggiorna la copia locale
      updateCatalogoPadre()
    };

    function selauthor(id: any, autore: any) {
      emit('selauthor', id, autore)
    }

    function opendetail() {
      opendetailbool.value = true
    }

    function mounted() {
      // 
    }

    onMounted(mounted)

    return {
      tools,
      t,
      func_tools,
      toolsext,
      shared_consts,
      globalStore,
      costanti,
      selauthor,
      opendetail,
      opendetailbool,
      optcatalogo,
      updateCatalogo,
    }
  }
})