import type { PropType } from 'vue';
import { defineComponent, onMounted, computed, ref, toRef, watch, nextTick } from 'vue';

import type {
  IOptCatalogo,
  IColGridTable,
  IElemText,
  IElementiScheda,
  IMyCard,
  IMyElem,
  IMyScheda,
  ISchedaSingola,
  IText,
} from '@src/model';
import { IImgGallery, ILabelValue, IMyPage, IOperators } from '@src/model';
import { useGlobalStore } from '@store/globalStore';
import { useCatalogStore } from '@store/CatalogStore';

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

import MixinMetaTags from '@src/mixins/mixin-metatags';
import MixinBase from '@src/mixins/mixin-base';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { emitKeypressEvents } from 'readline';
import { costanti } from '@costanti';
import objectId from '@src/js/objectId';
import { useProducts } from '@src/store/Products';

export default defineComponent({
  name: 'CMyElemAdd',
  components: {},
  emits: ['AddedNewElem'],
  props: {
    myelem: {
      type: Object as PropType<IMyElem>,
      required: true,
    },
    myElemParent: {
      type: Object as PropType<IMyElem>,
      required: true,
    },
    idPage: {
      type: String,
      required: false,
      default: '',
    },
    direzadd: {
      type: Number,
      required: false,
      default: 1,
    },
    editOn: {
      type: Boolean,
      required: false,
      default: false,
    },
    addOn: {
      type: Boolean,
      required: false,
      default: false,
    },
    addonlyinMem: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  setup(props, { emit }) {
    const globalStore = useGlobalStore();
    const catalogStore = useCatalogStore();
    const router = useRouter();

    const sections = computed(() => [
      { label: 'Principali', icon: 'fas fa-eye', items: shared_consts.TypesElem },
      { label: 'Gestione', icon: 'fas fa-cog', items: shared_consts.TypesElemAdmin },
      {
        label: 'Avanzati',
        icon: 'fas fa-star',
        items: shared_consts.TypesElemAdminTools,
      },
    ]);

    const { setmeta, getsrcbyimg } = MixinMetaTags();
    const { setValDb, getValDb } = MixinBase();

    const $q = useQuasar();
    const { t } = useI18n();

    const animare = ref(0);
    const slide = ref(0);
    const slide2 = ref(0);
    const tabCard = ref(0);
    const tabScheda = ref(0);
    const tabElemsText = ref('elem0');
    const arrPages = ref([] as any[]);
    const disableSave = ref(true);
    const enableEdit = ref(true);
    const elemChanged = ref(false);
    const enableAdd = ref(true);
    const tabadd = ref('tools');

    const Products = useProducts();

    const neworder = ref(<number | undefined>0);

    const idSchedaDaCopiare = ref('');

    const myel = toRef(props, 'myelem');
    const newtype = ref(<any>'');
    const visuadd = ref(false);

    const selectedClasses = ref(<any>[]);

    async function addNewElem(elemsel: any, direz: number) {
      // Nascondi la visualizzazione di aggiunta (presumo sia una variabile reattiva)
      visuadd.value = false;

      let neword = 0; // Ordinamento dell'elemento da aggiungere
      let recfound = null; // Variabile per conservare l'elemento trovato

      // Gestisci il movimento sopra o sotto
      if (direz === -1) {
        // Sopra: ottieni l'elemento precedente, mantenendo l'ordinamento
        recfound = globalStore.getMyElemPrecThisElemId(props.idPage, elemsel._id);
      } else if (direz === 1) {
        // Sotto: ottieni l'elemento successivo, mantenendo l'ordinamento
        recfound = globalStore.getMyElemNextThisElemId(props.idPage, elemsel._id);
      }

      // Se è stato trovato un elemento precedente o successivo
      if (recfound) {
        // Ottieni il "middle" del numero dell'ordinamento tra i due elementi
        if (Math.abs(recfound.order - elemsel.order) > 1)
          neword = Math.round((recfound.order + elemsel.order) / 2);
        else {
          if (direz === -1) {
            // Se i due elementi hanno lo stesso ordine, diminuisci l'ordinamento di 1
            neword = recfound.order - 10;
          } else {
            // Se i due elementi hanno lo stesso ordine, aumenta l'ordinamento di 1
            neword = recfound.order + 10;
          }
        }
      }

      // Associa l'ID della pagina e l'elemento a myelem
      let myelem = props.myelem;
      myelem.idPage = props.idPage;

      // Variabili per la gestione della sezione e della riga
      let sectionId = '';
      let rowId = '';

      console.log('sectionId', sectionId, 'rowId', rowId);

      // Aggiungi un nuovo elemento alla sezione o riga usando il metodo preparato
      const newrec = await globalStore.prepareAddNewElem(
        neword,
        $q,
        t,
        myelem,
        props.myElemParent,
        newtype.value
      );

      // Emitti l'evento per la selezione del nuovo elemento
      emit('AddedNewElem', newrec);

      // Se necessario, puoi emettere un evento per aggiornare tutti gli elementi (commentato per ora)
      // emit('updateAll', newrec);
    }

    return {
      tools,
      shared_consts,
      slide,
      slide2,
      animare,
      setmeta,
      getsrcbyimg,
      disableSave,
      addNewElem,
      newtype,
      neworder,
      elemChanged,
      enableAdd,
      getValDb,
      enableEdit,
      arrPages,
      costanti,
      visuadd,
      tabadd,
      Products,
      globalStore,
      myel,
      sections,
    };
  },
});