import { PropType, computed, defineComponent, onMounted, ref, watch } from "vue";
import draggable from 'vuedraggable'

import { tools } from '@tools'

import { useGlobalStore } from '@src/store/globalStore'

import { CMyEditorAI } from '@src/components/CMyEditorAI'
import { CAITools } from '@src/components/CAITools'

import { costanti } from '@costanti'

import type {
  IMyScheda,
  IProduct,
  IRecFields
} from '@src/model';
import { shared_consts } from "app/src/common/shared_vuejs";
import { useProducts } from "app/src/store/Products";
import { useI18n } from "vue-i18n";
import { useQuasar } from "quasar";


export default defineComponent({
  name: "CModifTrafiletto",
  emits: ['updateproductmodif', 'close', 'Savedb'],
  components: {
    CMyEditorAI, CAITools
  },
  props: {
    modelValue: {
      type: Object as PropType<IProduct>,
      required: true,
    },
    table: {
      type: String,
      required: true,
    },
    mykey: {
      type: String,
      required: true,
    },
    mysubkey: {
      type: String,
      required: false,
      default: '',
    },
    titolo: {
      type: String,
      required: false,
      default: '',
    },
    type: {
      type: Number,
      required: false,
      default: 0,
    },
    canModify: {
      type: Boolean,
      required: false,
      default: false,
    },
    maxlength: {
      type: Number,
      required: false,
      default: 0,
    }
  },
  setup(props, { emit }) {
    // Copia locale della lista_prodotti per manipolazione interna
    const $q = useQuasar()
    const { t } = useI18n()

    const globalStore = useGlobalStore()
    const products = useProducts()

    const mytab = ref('descr')

    const loading = ref(false)

    const updatetogm = ref(false)
    const field_updated_toGM = ref('')

    const myproduct = ref<IProduct>({ ...props.modelValue })

    const id = computed(() => myproduct.value.productInfo._id)

    const myvalue = computed<string>(() => {
      return myproduct.value.productInfo[props.mykey]
    })

    watch(() => props.modelValue, (newVal) => {
      myproduct.value = { ...newVal };
    }, { deep: false });


    async function mounted() {

    }

    /*
    // Aggiorna la copia locale quando il prop cambia
    watch(
      () => props.lista_prodotti,
      (newVal) => {
        internalProducts.value = [...newVal];
      }
    );
*/

    function updateproductmodif(element: any) {
      // console.log('CModifTrafiletto updateproductmodif ', element)
      emit('updateproductmodif', element)
    }

    function Savedb(element: any) {
      tools.saveInDBForTypes($q, props.mykey, element, props.type, true, props.table, props.mysubkey, id.value, null, '');
    }

    async function updateproduct(load?: boolean) {
      myproduct.value = await products.getProductById(myproduct.value._id, load)

    }

    const copyToClipboard = (text) => {
      navigator.clipboard.writeText(text)
        .then(() => {
          $q.notify({
            message: 'Testo copiato negli appunti!',
            color: 'positive',
            icon: 'check',
            position: 'top'
          });
        })
        .catch(err => {
          console.error('Errore durante la copia:', err);
          $q.notify({
            message: 'Errore nella copia',
            color: 'negative',
            icon: 'error',
            position: 'top'
          });
        });
    }

    function handleShowAndSave(payload: any) {
      Savedb(payload);
      updateproductmodif(payload);
    }

    onMounted(mounted)

    return {
      tools,
      globalStore,
      costanti,
      shared_consts,
      t,
      products,
      mytab,
      myproduct,
      updateproductmodif,
      Savedb,
      updatetogm,
      field_updated_toGM,
      loading,
      copyToClipboard,
      myvalue,
      handleShowAndSave,
    }
  }
})