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 { CImgTitle } from '@src/components/CImgTitle';
import { CImgPoster } from '@src/components/CImgPoster';
import { CTitle } from '@src/components/CTitle/index';
import { tools } from '@tools';
import { shared_consts } from '@src/common/shared_vuejs';
import { LandingFooter } from '@src/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 { CMyText } from '@src/components/CMyText';

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: 'CMyEditElem',
  components: {
    CImgTitle,
    CTitle,
    LandingFooter,
    CEventsCalendar,
    CCardCarousel,
    COpenStreetMap,
    CMyPage,
    CMyPageIntro,
    CMyEditor,
    CMyFieldRec,
    CSelectColor,
    CSelectFontSize,
    CSelectImage,
    CImgPoster,
    CSelectAnimation,
    CMySlider,
    CMySize,
    CBorders,
    CMyDimensioni,
    CMyText,
  },
  emits: ['saveElem', 'selElemClick', 'toggleSize', 'deleteElem', 'dupPage', 'expPage', 'impPage'],
  props: {
    myelem: {
      type: Object as PropType<IMyElem>,
      required: true,
    },
    path: {
      type: String,
      required: false,
      default: '',
    },
    idPage: {
      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 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() {
      const myelem = props.myelem;
      let neword = 0;
      if (myelem) {
        neword = myelem.order!;
        const recfound = globalStore.getMyElemNextThisElemId(props.idPage, 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.idPage, elemsel._id);
      } else if (direz === 1) {
        // Sotto
        // ottieni l'elemento precedente, mantenendo l'ordinamento
        recfound = globalStore.getMyElemNextThisElemId(props.idPage, elemsel._id);
      }

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

      const 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 exportPage() {
      emit('expPage', null);
    }
    async function importPage() {
      emit('impPage', 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() {
      try {
        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.idPage,
          };
          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_right_attaccato = tools.resetIText(recscheda.scheda?.testo_right_attaccato);
              recscheda.scheda.testo_right = tools.resetIText(recscheda.scheda?.testo_right);
              recscheda.scheda.testo_bottom = tools.resetIText(recscheda.scheda?.testo_bottom);

              if (!recscheda.scheda?.dimensioni.pagina.dimensioni) {
                recscheda.scheda.dimensioni.pagina = tools.resetRecIPagina(recscheda.scheda?.dimensioni.pagina);
              }
              if (!recscheda.scheda?.dimensioni?.pagina?.testo_up) {
                recscheda.scheda!.dimensioni.pagina.testo_up = tools.resetIText(null);
              }
              if (!recscheda.scheda?.dimensioni?.pagina?.testo_title) {
                recscheda.scheda!.dimensioni.pagina.testo_title = tools.resetIText(null);
              }
              if (!recscheda.scheda?.dimensioni?.pagina?.testo_down) {
                recscheda.scheda!.dimensioni.pagina.testo_down = tools.resetIText(null);
              }

              if (!recscheda.scheda?.etichette?.novita?.show) {
                recscheda.scheda.etichette!.novita = {
                  show: false,
                  months: 6,
                };
                recscheda.scheda.etichette!.bestseller = {
                  show: false,
                  quantiFattRaggiunti: 0,
                };
              }

              if (!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.print_isTemplate = false;
            myel.value.catalogo.print_linkIdTemplate = '';
            myel.value.catalogo.print_linkIdTemplatePerStampa = '';
          }

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

        if (myel.value.catalogo && !myel.value.catalogo.dimensioni_def) {
          myel.value.catalogo.dimensioni_def = {
            isTemplate: false,
            linkIdTemplate: '',
            linkIdTemplatePerStampa: '',
            name: '',
            pagina: {},
          };
        }
        if (myel.value.catalogo && myel.value.catalogo.dimensioni_def) {
          myel.value.catalogo.dimensioni_def.pagina = tools.resetRecIDimensioni(
            myel.value.catalogo.dimensioni_def.pagina
          );
        }

        // console.log('Area di stampa MOUNTED... ',myel.value.catalogo.areadistampa)
      } catch (error) {
        console.log(error);
      }
    }

    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() {
      Products.addNewScheda(myel.value.catalogo);

      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) {
        const 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) {
        const myscheda = tools.jsonCopy(myfindscheda);
        delete myscheda._id;
        delete myscheda.scheda!._id;
        myscheda.numPagineMax = 0;
        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) {
        const 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)

      const iscatalogo = costanti.CATALOGO_FIELDS.includes(col.name);
      const isscheda = costanti.SCHEDA_FIELDS.includes(col.name);
      const 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();
      }
      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 updateSizeWidth(value: any) {
      // Gestisce l'input dell'utente per un nuovo valore
      myel.value.widthimg = value; // Aggiorna widthimg con il nuovo valore
      modifElem();
    }
    function updateSizeHeight(value: any) {
      if (value)
        myel.value.heightimg = value; // Aggiorna widthimg con il nuovo valore
      else myel.value.heightimg = '';
      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) {
      const myelem = props.myelem;

      const elemprec = globalStore.getMyElemPrecThisElemId(props.idPage, myelem._id);
      const elemnext = globalStore.getMyElemNextThisElemId(props.idPage, myelem._id);

      if (!elemprec || !elemnext) return false;

      let neworder = 0;
      const oldorder = myelem.order!;

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

        if (oldorder === elemprec.order!) {
          const elemprec2 = globalStore.getMyElemPrecThisElemId(props.idPage, 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.idPage, 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,
      dupPage,
      tabScheda,
      addNewScheda,
      dupNewScheda,
      delRecScheda,
      addProdSpeciale,
      idSchedaDaCopiare,
      copyfromTemplate,
      modifElemAndSchede,
      exportPage,
      importPage,
      globalStore,
    };
  },
});