import { PropType, defineComponent, ref, watch } from 'vue'

import { Catalogo } from '@src/views/ecommerce/catalogo'
import { IOptCatalogo } from '@src/model'

export default defineComponent({
  name: 'CCatalogo',
  components: { Catalogo },
  emits: ['update:modelValue', 'updateCatalogo'],
  props: {
    // add options IOptCatalogo
    modelValue: {
      type: Object as PropType<IOptCatalogo>,
      required: true,
    },
    idPage: {
      type: String,
      required: false,
      default: '',
    },
  },

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

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

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

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

    function updateCatalogoEmit(updatedCatalogo: IOptCatalogo) {
      console.log('updateCatalogoEmit')
      localCatalogo.value = updatedCatalogo; // Aggiorna la copia locale
      updateCatalogoPadre()
      
    }

    return {
      localCatalogo,
      updateCatalogoEmit,
    };
  }
})