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

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

import { CImgTitle } from '@/components/CImgTitle'
import { CImgPoster } from '@/components/CImgPoster'
import { CTitle } from '@/components/CTitle/index'
import { tools } from '@store/Modules/tools'
import { shared_consts } from '@/common/shared_vuejs'
import { LandingFooter } from '@/components/LandingFooter'
import { COpenStreetMap } from '@src/components/COpenStreetMap'
import { CCardCarousel } from '@src/components/CCardCarousel'
import { CMyPage } from '@src/components/CMyPage'
import { CMyPageIntro } from '@src/components/CMyPageIntro'
import { CEventsCalendar } from '@src/components/CEventsCalendar'
import { CMyEditor } from '@src/components/CMyEditor'
import { CMySlider } from '@src/components/CMySlider'
import { CMyFieldRec } from '@src/components/CMyFieldRec'
import { CSelectImage } from '@src/components/CSelectImage'
import { CSelectAnimation } from '@src/components/CSelectAnimation'
import { CSelectColor } from '@src/components/CSelectColor'
import { CSelectFontSize } from '@src/components/CSelectFontSize'
import { CMySize } from '@src/components/CMySize'
import { CBorders } from '@src/components/CBorders'
import { CMyDimensioni } from '@src/components/CMyDimensioni'

import MixinMetaTags from '@/mixins/mixin-metatags'
import MixinBase from '@/mixins/mixin-base'
import { useQuasar } from 'quasar'
import { useI18n } from '@/boot/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: 'CMyEditElem',
  components: {
    CImgTitle, CTitle, LandingFooter, CEventsCalendar,
    CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
    CSelectColor, CSelectFontSize, CSelectImage, CImgPoster, CSelectAnimation, CMySlider,
    CMySize, CBorders, CMyDimensioni,
  },
  emits: ['saveElem', 'selElemClick', 'toggleSize', 'deleteElem', 'dupPage'],
  props: {
    myelem: {
      type: Object as PropType<IMyElem>,
      required: true,
    },
    path: {
      type: String,
      required: false,
      default: '',
    },
    IdPath: {
      type: String,
      required: false,
      default: '',
    },
    editOn: {
      type: Boolean,
      required: false,
      default: false,
    },
    addOn: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  setup(props, { emit }) {
    const globalStore = useGlobalStore()

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


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

    const posizTextOptions = ref([
      { label: 'In basso', value: costanti.POSIZ_TESTO.IN_BASSO },
      { label: 'A Destra', value: costanti.POSIZ_TESTO.A_DESTRA },
    ])
    const formatOptions = ref([
      { label: 'auto', value: 'CODE128' },
      { label: 'EAN-13', value: 'EAN-13' },
      { label: 'UPC', value: 'upc' },
    ])
    const fontSizeOptions = ref([
      { label: '9', value: '9' },
      { label: '10', value: '10' },
      { label: '11', value: '11' },
      { label: '12', value: '12' },
      { label: '13', value: '13' },
      { label: '14', value: '14' },
      { label: '15', value: '15' },
      { label: '16', value: '16' },
      { label: '18', value: '18' },
      { label: '20', value: '20' },
      { label: '22', value: '22' },
    ])

    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 direzadd = ref(1)

    const selectedClasses = ref(<any>[])

    watch(() => myel.value.order, (value, oldval) => {
      mounted()
    })

    function getArrDisciplines() {
      return globalStore.disciplines.filter((rec: any) => rec.showinhome)
    }

    function saveElem(exit?: boolean) {
      // Save Elem record
      const myelem = props.myelem
      myelem.order = neworder.value
      globalStore.saveMyElem($q, t, myelem).then((ris) => {
        if (ris) {
          // OK
          disableSave.value = true
          emit('saveElem', myelem)

          if (exit)
            elemChanged.value = false
        }
      })
    }

    function getNewOrderByThisElem() {
      let myelem = props.myelem
      let neword = 0
      if (myelem) {
        neword = myelem.order!
        const recfound = globalStore.getMyElemNextThisElemId(props.path, myelem._id!)

        if (recfound) {
          neword = Math.round((recfound.order! + myelem.order!) / 2)
        }
      }
      return neword
    }

    async function addNewElem(elemsel: any, direz: number) {

      visuadd.value = false

      let neword = 0

      let recfound = null

      if (direz === -1) {  // Sopra
        // ottieni l'elemento precedente, mantenendo l'ordinamento
        recfound = globalStore.getMyElemPrecThisElemId(props.path, elemsel._id)
      } else if (direz === 1) {  // Sotto
        // ottieni l'elemento precedente, mantenendo l'ordinamento
        recfound = globalStore.getMyElemNextThisElemId(props.path, elemsel._id)
      }

      if (recfound) {
        // get the middle of the order number between thie 2 elements
        neword = Math.round((recfound.order + elemsel.order) / 2)
      }

      let newrec = await globalStore.prepareAddNewElem(neword, $q, t, props.myelem, newtype.value)

      emit('selElemClick', newrec)

      // emit('updateAll', newrec)
    }

    async function dupPage() {
      emit('dupPage', null)
    }
    async function dupElem(order?: number) {

      const newrec: IMyElem = tools.jsonCopy(props.myelem)

      newrec._id = undefined
      newrec.order = getNewOrderByThisElem()
      if (newrec.type === shared_consts.ELEMTYPE.HTML) {
        newrec.containerHtml = 'Copia di ' + newrec.containerHtml
      }

      const mynewelem = await globalStore.addNewElem($q, t, newrec)

      emit('selElemClick', mynewelem)

    }

    function delElem() {
      $q.dialog({
        message: 'Eliminare ' + props.myelem.container + ' ?',
        html: true,
        ok: {
          label: 'Elimina',
          push: true,
        },
        title: '',
        cancel: true,
        persistent: false,
      }).onOk(async () => {

        // Save Elem record
        await globalStore.delMyElem($q, t, props.myelem).then((ris) => {
          if (ris) {
            // OK
            disableSave.value = true
            emit('deleteElem', props.myelem)
          }
        })
      })

    }

    function modifElem() {
      disableSave.value = false
      elemChanged.value = true
    }
    function modifElemAndSchede() {
      modifElem()

      myel.value.catalogo!.aggiorna++

    }

    function mounted() {
      neworder.value = props.myelem.order

      arrPages.value = []
      arrPages.value.push({ label: '[Vuoto]', path: '' })
      for (const page of globalStore.mypage) {

        const rec = {
          // @ts-ignore
          label: page.title,
          // @ts-ignore
          value: page.path
        }
        arrPages.value.push(rec)
      }

      if (props.myelem)
        newtype.value = props.myelem.type

      if (myel.value.class4) {
        selectedClasses.value = myel.value.class4.split(' ').filter(Boolean)
      }

      if (myel.value.catalogo && myel.value.catalogo?.arrSchede) {
        for (const recscheda of myel.value.catalogo?.arrSchede) {
          if (recscheda.scheda && (!recscheda.scheda?.testo_bottom)) {
            recscheda.scheda.testo_bottom = { contenuto: '', maxlength: 100 }
          }
          if (recscheda.scheda && !recscheda.scheda.testo_bottom!.font) {
            recscheda.scheda.testo_bottom!.font = { name: '', size: ''}
          }
          if (recscheda.scheda && (!recscheda.scheda?.testo_right || !recscheda.scheda?.testo_right.font) ) {
            recscheda.scheda.testo_right = { contenuto: '', font: { name: '', size: ''} }
          }
          if (recscheda.scheda && (!recscheda.scheda?.dimensioni.pagina.imgsfondo)) {
            recscheda.scheda.dimensioni.pagina = tools.resetRecIDimensioni(recscheda.scheda?.dimensioni.pagina)
          }
          if (recscheda.scheda && (!recscheda.scheda?.barcode || !recscheda.scheda?.barcode.font)) {
            recscheda.scheda.barcode = {
              show: false,
              format: '',
              size: {
                width: '2',
                height: '33',
              },
              font: {
                name: '',
                size: '11',
              }
            }
          }

        }
      }

      if (myel.value.catalogo) {
        if (!myel.value.catalogo.first_page) {
          myel.value.catalogo.first_page = tools.resetRecIDimensioni(null)
        }

        myel.value.catalogo.first_page = tools.resetRecIDimensioni(myel.value.catalogo.first_page)
      }
      if (myel.value.catalogo) {
        if (!myel.value.catalogo.last_page)
          myel.value.catalogo.last_page = tools.resetRecIDimensioni(null)

        myel.value.catalogo.last_page = tools.resetRecIDimensioni(myel.value.catalogo.last_page)
      }
      if (myel.value.catalogo) {
        if (!myel.value.catalogo.areadistampa) {
          myel.value.catalogo.areadistampa = tools.resetRecIAreaDiStampa(null)
          myel.value.catalogo.areadistampa.margini = { left: '0.59', top: '0.59', right: '0.59', bottom: '0.28'}
        }

        myel.value.catalogo.areadistampa = tools.resetRecIAreaDiStampa(myel.value.catalogo.areadistampa)
      }

      if (myel.value.catalogo && !myel.value.catalogo.dimensioni_def) {
        myel.value.catalogo.dimensioni_def = { pagina: {} }
      }
      if (myel.value.catalogo && myel.value.catalogo.dimensioni_def) {
        myel.value.catalogo.dimensioni_def.pagina = tools.resetRecIDimensioni(myel.value.catalogo.dimensioni_def.pagina)
      }

    }

    function clickOnElem() {
      if (props.editOn) {
      }
    }

    function addNewCard() {
      if (!myel.value.listcards)
        myel.value.listcards = []

      myel.value.listcards.push({ _id: objectId(), imagefile: '', alt: '', description: '', vers_img: 0 })
      modifElem()


    }
    function addNewScheda() {

      let maxorder = 0
      myel.value.catalogo!.arrSchede?.forEach(scheda => {
        if (scheda?.order! > maxorder) {
          maxorder = scheda.order
        }
      })

      let defaultDimensioniPag = tools.resetRecIDimensioni(null)
      defaultDimensioniPag.size = {
        width: '800px',
        height: '600px',
      }
      defaultDimensioniPag.margini = {
        top: '12px',
        bottom: '0px',
        left: '0px',
        right: '0px',
      }
      defaultDimensioniPag.padding = {
        top: '0px',
        bottom: '0px',
        left: '0px',
        right: '0px',
      }

      let defaultDimensioniRiga = tools.resetRecIDimensioni(null)

      defaultDimensioniRiga.size = {
        width: '800px',
        height: '300px',
      }
      defaultDimensioniRiga.margini = {
        top: '40px',
        bottom: '0px',
        left: '0px',
        right: '0px',
      }
      defaultDimensioniRiga.padding = {
        top: '0px',
        bottom: '0px',
        left: '0px',
        right: '0px',
      }

      let defaultSchedaProdotto = tools.resetRecIDimensioni(null)

      defaultSchedaProdotto.size = {
        width: '360px',
        height: '230px',
      }

      defaultSchedaProdotto.margini = {
        top: '0px',
        bottom: '0px',
        left: '0px',
        right: '0px',
      }

      defaultSchedaProdotto.padding = {
        top: '0px',
        bottom: '0px',
        left: '0px',
        right: '0px',
      }

      let dimensioni: IElementiScheda = {
        pagina: defaultDimensioniPag,
        riga: defaultDimensioniRiga,
        scheda_prodotto: defaultSchedaProdotto,
        immagine_prodotto: {
          size: {
            width: '150px',
            height: '235px',
          },
          margini: {
            top: '0px',
            bottom: '0px',
            left: '0px',
            right: '0px',
          },
          padding: {
            top: '0px',
            bottom: '0px',
            left: '0px',
            right: '0px',
          },
        },
      }

      let newscheda: IMyScheda = {
        _id: objectId(),
        idapp: tools.appid()!,
        isTemplate: false,
        show_separatore: true,
        name: 'Scheda Nuova',
        dimensioni,
        line_height: 100,
        numschede_perRiga: 2,
        numschede_perCol: 2,
        posiz_text: costanti.POSIZ_TESTO.A_DESTRA,
        testo_right: {
          contenuto: '',
        },
        testo_bottom: {
          contenuto: '',
        },
        barcode: {
          show: false,
          format: '',
          size: {
            width: '2',
            height: '100',
          },
          font: {
            name: 'monospace',
            size: '16px',
          }
        },
        productTypes: [],
        excludeproductTypes: [],
        editore: [],
        author: '',
        sort: costanti.SORT_PUBDATE,
        arrProdottiSpeciali: [],
      }

      if (!myel.value.catalogo!.arrSchede)
        myel.value.catalogo!.arrSchede = []

      myel.value.catalogo!.arrSchede.push(
        {
          _id: objectId(),
          scheda: newscheda,
          order: maxorder + 10,
          numSchede: 1,
        }
      )
      // console.log('arrschede', myel.value.catalogo!.arrSchede)

      modifElem()

    }

    function copyfromTemplate(indscheda: number) {
      // Estrai l'id da copiare e sostituisci tutto con questo

      if (!idSchedaDaCopiare.value) {
        return false
      }

      const arrschede: ISchedaSingola[] = globalStore.getMySchede()

      if (arrschede.length <= 0) {
        return false
      }

      const myschedatocopy = arrschede.find((recscheda: ISchedaSingola) => recscheda.scheda!._id === idSchedaDaCopiare.value)
      const schedadest = myel.value.catalogo!.arrSchede![indscheda]

      if (myschedatocopy) {

        let newscheda = myschedatocopy.scheda!.name

        const msg = 'Sostituisci questa scheda (' + schedadest.scheda?.name + ') con "' + newscheda + '" ?'

        $q.dialog({
          message: msg,
          html: true,
          ok: {
            label: 'Sostituisci',
            push: true,
          },
          title: '',
          cancel: true,
          persistent: false,
        }).onOk(async () => {
          const myschedadest: ISchedaSingola = myel.value.catalogo!.arrSchede![indscheda]
          myschedadest.scheda = tools.jsonCopy(myschedatocopy.scheda!)
          myschedadest.scheda!._id = objectId()
          myschedadest.order = 20
          
          myschedadest.scheda!.name = myschedadest.scheda!.name + '_copia'
          myschedadest.scheda!.isTemplate = false            
        })
        
      }
    }
    function dupNewScheda(id: string) {
      if (!myel.value.catalogo!.arrSchede)
        return

      const myfindscheda = myel.value.catalogo!.arrSchede.find((scheda: ISchedaSingola) => scheda._id === id)

      if (myfindscheda) {
        let myscheda = tools.jsonCopy(myfindscheda)
        delete myscheda._id
        delete myscheda.scheda!._id
        myscheda.numSchede = 1
        myscheda.order = myscheda.order + 10,
        myscheda._id = objectId()
        myscheda.scheda!._id = objectId()
        myscheda.scheda!.name = myscheda.scheda!.name + '_copia'
        myscheda.scheda!.isTemplate = false

        const bakscheda = [...myel.value.catalogo!.arrSchede]

        myel.value.catalogo!.arrSchede.push(myscheda)
        modifElem()
      }

    }


    function dupNewCard() {
      if (!myel.value.listcards)
        return

      const myfindcard = myel.value.listcards[tabCard.value]

      if (myfindcard) {
        let mycard = tools.jsonCopy(myfindcard)
        delete mycard._id
        mycard._id = objectId()

        const bakcard = [...myel.value.listcards]

        myel.value.listcards = []
        myel.value.listcards = [...bakcard, mycard]
        modifElem()
      }


    }

    function addNewElemText() {
      if (!myel.value.elemsText)
        myel.value.elemsText = []

      myel.value.elemsText.push({ _id: objectId(), text: '', color: '#ffffff', class: '', size: '', anim: { name: 'FadeIn', clduration: '', cldelay: '', timingtype: 'ease-in-out' } })
      modifElem()
    }

    function getClass() {
      let mycl = ''
      if (props.myelem.align === shared_consts.ALIGNTYPE.CEHTER) {
        mycl += ' align_center'
      } else if (props.myelem.align === shared_consts.ALIGNTYPE.RIGHT) {
        mycl += ' align_right'
      } else if (props.myelem.align === shared_consts.ALIGNTYPE.LEFT) {
        mycl += ' align_left'
      }

      return mycl
    }

    function showFit() {
      if (props.myelem.type)
        return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
      else
        return false
    }

    function delRecCard(id: string, myel: IMyElem) {
      //
      if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
        if (myel.listcards)
          myel.listcards = myel.listcards.filter((card: IMyCard) => card._id !== id)
      } else if (props.myelem.type === shared_consts.ELEMTYPE.IMGPOSTER) {
        if (myel.elemsText)
          myel.elemsText = myel.elemsText.filter((rec: IElemText) => rec._id !== id)
      }

    }
    function delRecScheda(id: string, myel: IMyElem) {

      const myscheda = myel.catalogo!.arrSchede!.find((scheda: ISchedaSingola) => scheda._id === id)

      if (myscheda) {
        $q.dialog({
          message: 'Eliminare la scheda "' + myscheda?.scheda?.name + '" ?',
          html: true,
          ok: {
            label: 'Elimina',
            push: true,
          },
          title: '',
          cancel: true,
          persistent: false,
        }).onOk(async () => {

          //
          myel.catalogo!.arrSchede = myel.catalogo!.arrSchede!.filter((scheda: ISchedaSingola) => scheda._id !== id)

          modifElem()
        })
      }

    }

    function saveFieldElem(rec: any, newval: any, col: IColGridTable) {
      //console.log('saveFieldElem', rec, 'newval', newval, 'col', col)

      let iscatalogo = costanti.CATALOGO_FIELDS.includes(col.name)
      let isscheda = costanti.SCHEDA_FIELDS.includes(col.name)
      let isIImg = costanti.IMG_FIELDS.includes(col.name) && (col.fieldtype === costanti.FieldType.image)

      if (col.fieldtype === costanti.FieldType.image) {
        if (iscatalogo) {
          myel.value.catalogo[col.name] = newval.imagefile
          //console.log('SALVATO IN', col.name, newval.imagefile, 'RIS', myel.value.catalogo[col.name])
        } else if (isscheda) {
          rec[col.name] = newval.imagefile
        } else if (isIImg) {
          if (!rec[col.name]) {
            rec[col.name] = {}
          }
          rec[col.name].imagefile = newval.imagefile
        } else {
          myel.value[col.name] = newval.imagefile
        }
      } else {
        if (iscatalogo) {
          myel.value.catalogo[col.name] = newval
          console.log('SALVATO IN', col.name, newval, 'RIS', myel.value.catalogo[col.name])
        } else if (isscheda) {
          rec[col.name] = newval
        } else {
          myel.value[col.name] = newval
        }
      }
    }

    function saveCard(recpass: IMyCard, myval: any) {
      if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
        if (props.myelem.listcards) {
          props.myelem.listcards.forEach((rec: IMyCard) => {
            if (recpass._id === rec._id) {
              if (myval.imagefile) {
                rec.imagefile = myval.imagefile
                rec.vers_img = tools.getGenerateVersionImage()
              } else {
                rec.imagefile = myval
              }
            }
          })
        }
      } else if (props.myelem.type === shared_consts.ELEMTYPE.IMGPOSTER) {
        if (props.myelem.elemsText) {
          props.myelem.elemsText.forEach((rec: IElemText) => {
            if (recpass._id === rec._id) {
              if (myval.imagefile) {
                rec.text = myval.imagefile
              } else {
                rec.text = myval
              }
            }
          })
        }
      } else if ((props.myelem.type === shared_consts.ELEMTYPE.IMGTITLE) ||
        (props.myelem.type === shared_consts.ELEMTYPE.IMAGE)) {
        myel.value.image = myval
        myel.value.vers_img = tools.getGenerateVersionImage()

      } else if (props.myelem.type === shared_consts.ELEMTYPE.IMAGE) {
        myel.value.image = myval

      }
      modifElem()

    }

    function showAnimation() {
      return (myel.value.type === shared_consts.ELEMTYPE.IMAGE)
        || (myel.value.type === shared_consts.ELEMTYPE.IMGTITLE)
        || (myel.value.type === shared_consts.ELEMTYPE.TEXT)
        || (myel.value.type === shared_consts.ELEMTYPE.CARD)
        || (myel.value.type === shared_consts.ELEMTYPE.HTML)
        || (myel.value.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS)
    }

    /*function updateElem(myvalue: any) {
      console.log('updateElem', myvalue)
      if (myel.value.type === shared_consts.ELEMTYPE.IMGTITLE) {
        myel.value.container = myvalue
      }
      modifElem()
    }*/

    function generateSizeOptions(widthpx: boolean = true) {
      const options = [];

      let add = '';
      if (widthpx)
        add = 'px'
      for (let i = 0; i <= 700; i += 50) {

        options.push({ label: `${i}${add}`, value: `${i}${add}` });
      }
      return options;
    }

    function SchedeOpt() {
      const arrschede: ISchedaSingola[] = globalStore.getMySchede()

      let arr: any = []

      if (arrschede) {
        arrschede.forEach((recscheda: ISchedaSingola) => {
          arr.push({ label: recscheda.scheda!.name, value: recscheda.scheda!._id })
        });
      }

      return arr
    }

    function updateSizeWidth(value: any) {
      // Gestisce l'input dell'utente per un nuovo valore
      myel.value.widthimg = value; // Aggiorna widthimg con il nuovo valore
      modifElem()
    }
    function updateCatalogoSizeWidth(value: any) {
      // Gestisce l'input dell'utente per un nuovo valore
      myel.value.catalogo!.width = value // Aggiorna widthimg con il nuovo valore
      modifElem()
    }
    function updateSizeHeight(value: any) {
      myel.value.heightimg = value; // Aggiorna widthimg con il nuovo valore
      modifElem()
    }

    function toggleSize() {
      emit('toggleSize', null)
    }

    const orderOptions = computed(() => {
      const options = []

      for (let i = 0; i <= 100; i += 1) {
        options.push({ label: i.toString(), value: i });
      }

      for (let i = 100; i <= 1000; i += 10) {
        options.push({ label: i.toString(), value: i });
      }

      return options;
    });

    function addOrder(rec: any) {
      neworder.value = rec
    }

    function addProdSpeciale(rec: any) {
      neworder.value = rec
    }

    async function moveElem(direz: any) {
      let myelem = props.myelem

      const elemprec = globalStore.getMyElemPrecThisElemId(props.path, myelem._id!)
      const elemnext = globalStore.getMyElemNextThisElemId(props.path, myelem._id!)

      let neworder = 0
      let oldorder = myelem.order!

      if (direz === -1) {
        // UP
        neworder = elemprec.order!
        elemprec.order = oldorder

        if (oldorder === elemprec.order!) {
          const elemprec2 = globalStore.getMyElemPrecThisElemId(props.path, elemprec._id!)

          neworder = (elemprec2.order! + elemprec.order) / 2
          elemprec.order = Math.round((oldorder + neworder) / 2)
        }

        await globalStore.saveMyElem($q, t, elemprec)
        emit('saveElem', elemprec)
      } else if (direz === 1) {
        // DOWN
        neworder = elemnext.order!
        elemnext.order = oldorder

        if (oldorder === elemnext.order!) {
          const elemnext2 = globalStore.getMyElemNextThisElemId(props.path, elemnext._id!)

          neworder = (elemnext2.order! + elemnext.order) / 2
          elemnext.order = Math.round((oldorder + neworder) / 2)
        }


        await globalStore.saveMyElem($q, t, elemnext)
        emit('saveElem', elemnext)
      }

      myelem.order = neworder
      await globalStore.saveMyElem($q, t, myelem)
      emit('saveElem', myelem)
    }

    function classiImmagineOptions() {
      // Ritorna l'array delle classi, ad esempio:
      return [
        { label: 'Tonda', value: 'image-circle' },
        { label: 'Sbordata', value: 'image-round-bordered' },
        { label: 'Ombrata', value: 'image-ombra' },
        // Aggiungi altre classi se necessario
      ];
    }

    function updateClass4(selectedOptions: any) {

      // Aggiorna selectedClasses
      selectedClasses.value = selectedOptions;

      if (myel.value) {
        // Imposta myel.class2 come stringa
        myel.value.class4 = selectedOptions.join(' ');  // Converte l'array in una stringa separata da spazi

        saveElem()
      }
    }


    onMounted(mounted)

    return {
      tools,
      shared_consts,
      getArrDisciplines,
      slide,
      slide2,
      animare,
      setmeta,
      getsrcbyimg,
      saveElem,
      myel,
      disableSave,
      modifElem,
      delElem,
      addNewElem,
      newtype,
      neworder,
      elemChanged,
      enableAdd,
      clickOnElem,
      getClass,
      showFit,
      getValDb,
      dupElem,
      enableEdit,
      addNewCard,
      addNewElemText,
      arrPages,
      costanti,
      delRecCard,
      saveCard,
      // updateElem,
      showAnimation,
      tabCard,
      tabElemsText,
      visuadd,
      tabadd,
      Products,
      generateSizeOptions,
      updateSizeWidth,
      direzadd,
      toggleSize,
      orderOptions,
      addOrder,
      moveElem,
      updateSizeHeight,
      dupNewCard,
      updateClass4,
      selectedClasses,
      classiImmagineOptions,
      saveFieldElem,
      updateCatalogoSizeWidth,
      dupPage,
      posizTextOptions,
      tabScheda,
      addNewScheda,
      dupNewScheda,
      delRecScheda,
      SchedeOpt,
      addProdSpeciale,
      formatOptions,
      fontSizeOptions,
      idSchedaDaCopiare,
      copyfromTemplate,
      modifElemAndSchede,
    }
  },

})