import type { PropType } from 'vue';
import {
  defineComponent,
  onMounted,
  onBeforeMount,
  ref,
  toRef,
  watch,
  computed,
} from 'vue';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '@store/UserStore';
import { useGlobalStore } from '@store/globalStore';
import { useQuasar } from 'quasar';
import type { IColGridTable, IImgGallery, ISpecialField } from 'model';
import { CMyChipList } from '../CMyChipList';
import { CDate } from '../CDate';
import { CDateTime } from '../CDateTime';
import { CDateTimeStartEnd } from '../CDateTimeStartEnd';
import { CLabel } from '../CLabel';
import { CMyToggleList } from '../CMyToggleList';
import { CMySelect } from '../CMySelect';
import { CCurrencyValue } from '../CCurrencyValue';
import { CMapEditAddressByCoord } from '../CMapEditAddressByCoord';
import { CInput } from '../CInput';
import { CMyEditor } from '../CMyEditor';
import { CMyEditorAI } from '../CMyEditorAI';
import { CGallery } from '../CGallery';
import { CPickColor } from '../CPickColor';
import { CSelectImage } from '../CSelectImage';
import { CAccomodation } from '../CAccomodation';
import { tools } from '@tools';
import { costanti } from '@costanti';

// @ts-ignore
// import VueTelInput from 'vue3-tel-input'
// import 'vue3-tel-input/dist/vue3-tel-input.css'

import { fieldsTable } from '@store/Modules/fieldsTable';
import MixinBase from '@/mixins/mixin-base';
import MixinUsers from '@/mixins/mixin-users';
import { toolsext } from '@store/Modules/toolsext';
import { shared_consts } from '@/common/shared_vuejs';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'CMyPopupEdit',
  emits: ['showandsave', 'update:row', 'show', 'save', 'annulla', 'update_col'],
  props: {
    title: {
      type: String,
      required: false,
      default: '',
    },
    row: {
      type: Object,
      required: true,
    },
    rec: {
      type: Object,
      required: false,
      default: null,
    },
    fielddb: {
      type: Boolean,
      required: false,
      default: false,
    },
    dense: {
      type: Boolean,
      required: false,
      default: false,
    },
    justifycenter: {
      type: Boolean,
      required: false,
      default: true,
    },
    isrec: {
      type: Boolean,
      required: false,
      default: false,
    },
    mycol: {
      type: Object as PropType<IColGridTable | undefined | null>,
      required: false,
      default: undefined,
    },
    canEdit: {
      type: Boolean,
      required: false,
      default: false,
    },
    insertMode: {
      type: Boolean,
      required: false,
      default: false,
    },
    canModify: {
      type: Boolean,
      required: false,
      default: false,
    },
    isInModif: {
      type: Boolean,
      required: false,
      default: false,
    },
    field: {
      type: String,
      required: false,
      default: '',
    },
    myclass: {
      type: String,
      required: false,
      default: '',
    },
    field2: {
      type: String,
      required: false,
      default: '',
    },
    subfield: {
      type: String,
      required: false,
      default: '',
    },
    label_trans: {
      type: String,
      required: false,
      default: '',
    },
    subfield_to_see: {
      type: String,
      required: false,
      default: '',
    },
    fieldsel_tosee: {
      type: String,
      required: false,
      default: '',
    },
    subfield2: {
      type: String,
      required: false,
      default: '',
    },
    mysubsubkey: {
      type: String,
      required: false,
      default: '',
    },
    specialField: {
      type: Object as PropType<ISpecialField>,
      required: false,
      default: null,
    },
    serv: {
      type: Boolean,
      required: false,
      default: false,
    },
    indrec: {
      type: Number,
      required: false,
      default: -1,
    },
    type: {
      type: Number,
      required: false,
      default: 0,
    },
    showall: {
      type: Boolean,
      required: false,
      default: false,
    },
    view: {
      type: String,
      required: false,
      default: 'row',
    },
    disable: {
      type: Boolean,
      required: false,
      default: false,
    },
    visulabel: {
      type: Boolean,
      required: false,
      default: false,
    },
    jointable: {
      type: String,
      required: false,
      default: '',
    },
    filter: {
      type: [String, Function],
      required: false,
      default: null,
    },
    field_extra: {
      type: String,
      required: false,
      default: '',
    },
    value_extra: {
      type: [String, Number],
      required: false,
      default: '',
    },
    table: {
      type: String,
      required: false,
      default: '',
    },
    myimg: {
      type: String,
      required: false,
      default: '',
    },
    id: {
      type: [String, Number],
      required: false,
      default: '',
    },
    idmain: {
      type: String,
      required: false,
      default: '',
    },
    tablesel: {
      type: String,
      required: false,
      default: '',
    },
    pickup: {
      type: Boolean,
      required: false,
      default: false,
    },
    nosaveToDb: {
      type: Boolean,
      required: false,
      default: false,
    },
    notAllowAtChar: {
      type: Boolean,
      required: false,
      default: false,
    },
    path: {
      type: String,
      required: false,
      default: '',
    },
  },
  components: {
    CMyChipList,
    CDateTime,
    CDateTimeStartEnd,
    CDate,
    CMyToggleList,
    CMySelect,
    CMyEditor,
    CGallery,
    CMyEditorAI,
    CCurrencyValue,
    CLabel,
    CAccomodation,
    CSelectImage,
    CMapEditAddressByCoord,
    CInput,
    CPickColor,
  },
  setup(props, { emit }) {
    const $q = useQuasar();
    const { t } = useI18n();
    const userStore = useUserStore();
    const globalStore = useGlobalStore();

    const myvaltosee = ref(null as any);
    const myvalue = ref(null as any);
    const myvalue2 = ref(null as any);
    const myvalueprec = ref('false');
    const countryname = ref('');
    const visueditor = ref(false);
    const visuhtml = ref(false);
    const showeditor = ref(false);

    const hoverPreview = ref(false);

    const myImgGall = ref([{}] as IImgGallery[]);

    const $router = useRouter();

    const loaded = ref(false);
    const modeEdit = ref(false);

    const myColor = ref('#FF00AA55'); // Colore con trasparenza iniziale

    const popupEditRef = ref(null);

    const colorPicker = ref(null);

    const addstrrequired = ref('');

    const col = ref(<IColGridTable>{
      name: 'test',
      fieldtype: 0,
      showWhen:
        costanti.showWhen.NewRec + costanti.showWhen.InEdit + costanti.showWhen.InView,
      visible: true,
      maxlength: props.mycol ? props.mycol.maxlength : 0,
      minlength: props.mycol ? props.mycol.minlength : undefined,
    });

    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',
          });
        });
    };

    const { setValDb, getValDb } = MixinBase();
    const { getMyUsername } = MixinUsers();

    const myrealrow = toRef(props, 'row');

    watch(
      () => props.row,
      (newval, oldval) => {
        refresh();
      }
    );

    watch(
      () => props.rec,
      (newval, oldval) => {
        refresh();
      },
      { deep: true }
    );

    const myrow = ref(<any>null);
    const mypath = ref('');

    /*     const myrow = computed(() => {
          return props.rec && props.isrec ? props.rec : props.row
        })
     */
    function crea() {
      // console.log('crea', isFieldDb(), 'props.mycol', props.mycol)

      if (props.mycol && props.mycol.name && props.mycol.name !== 'test') {
        col.value = { ...props.mycol };
      } else {
        if (col.value.name === 'test') {
          col.value.name = props.field;
          if (props.subfield) {
            col.value.name += '.' + props.subfield;
          }
        }
        col.value.jointable = props.jointable;
        col.value.label_trans = props.label_trans;
        if (props.filter) col.value.filter = props.filter;
        col.value.fieldtype = props.type;

        if (props.type === costanti.FieldType.imagerec) {
          myImgGall.value = [
            {
              _id: '',
              imagefile: myvalue.value,
              vers_img: 1,
              alt: 'img',
            },
          ];
        } else if (props.type === costanti.FieldType.imgfile_sfuso) {
          myImgGall.value = [
            {
              _id: '',
              imagefile: myvalue.value,
              vers_img: 1,
              alt: 'img',
            },
          ];
        } else if (props.type === costanti.FieldType.imgcard) {
          myImgGall.value = [myvalue.value];
        }

        // console.log('* col', col.value);
      }

      if (props.type) {
        col.value.fieldtype = props.type;
      }

      if (props.isrec) {
      } else {
        if (isFieldDb()) {
          myvalue.value = getValDb(
            props.field,
            props.serv,
            '',
            props.table,
            props.subfield,
            props.id,
            props.idmain,
            props.indrec,
            props.mysubsubkey,
            props.specialField
          );
          myvalue2.value = getValDb(
            props.field2,
            props.serv,
            '',
            props.table,
            props.subfield2,
            props.id,
            props.idmain,
            props.indrec,
            '',
            props.specialField
          );
        } else {
          if (props.mycol && props.mycol.name) col.value = { ...props.mycol };
        }
      }

      addstrrequired.value = col.value.required ? '* ' : '';

      // console.log('popupedit myvalue.value: ', myvalue.value)

      if (props.tablesel) {
        // let obj = tools.getParamsByTable(props.table)
        // console.log('OBJ:', obj)
        if (true) {
          // console.log(' CAMPO', props.field + '.' + props.subfield)
          const myval = tools.getLabelFooterByRow(
            myrow.value,
            props.field + '.' + props.subfield,
            props.table
          );
          if (myval) myvalue.value = myval;
          // console.log(' RECORD INPUT', myrow.value)
          // console.log(' VALORE OUTPUT: ', myvalue.value)
        }
      }

      if (props.path) {
        mypath.value = props.path;
      } else {
        if (tools.existProp(col.value, 'path'))
          mypath.value = col.value.path ? col.value.path : '';
      }

      // console.log('CMyFieldDb crea', myvalue)
    }

    watch(
      () => props.id,
      (newval, oldval) => {
        crea();
      }
    );

    function isFieldDb() {
      // return props.type !== 0
      return props.fielddb;
    }

    function isviewfield() {
      return props.view === 'field';
    }

    function changeval(newval: any) {
      // console.log('changeval update:row', newval)
      if (!props.isrec) {
        emit('update:row', props.row);
      }
      if (props.isInModif) OpenEdit();
    }

    function getrealval(newval: any) {
      if (col.value.fieldtype === costanti.FieldType.hours) {
        newval = newval.value;
      }
    }

    async function addNewValue(value: any) {
      // console.log('addNewValue', value, col.value)

      if (col.value.allowNewValue && col.value.jointable) {
        const myrec: any = {};

        const mylabel = fieldsTable.getLabelByTable(col.value.jointable);
        myrec[mylabel] = value;

        if (col.value.filter_field && props.value_extra) {
          myrec[col.value.filter_field] = props.value_extra;
        }

        // console.log('value_extra', props.value_extra)
        if (props.table) {
          return await globalStore.saveNewRecord(col.value.jointable, myrec);
        }
      }
      return null;
    }

    function changeValRecCoordAddr(newval: any) {
      // console.log('changeValRecCoordAddr', newval, 'myrow', myrow.value[col.value.name])
      if (!myrow.value[col.value.name]) {
        myrow.value[col.value.name] = {};
      }
      if (newval.coordinates && newval.coordinates.lat) {
        newval.coordinates.lat = tools.convertToDecimal6(newval.coordinates.lat);
        newval.coordinates.lng = tools.convertToDecimal6(newval.coordinates.lng);
      }
      // console.log('newval...', newval)
      return changevalRecOrig(newval);
    }
    function changevalRec(newval: any) {
      return changevalRecOrig(newval, props.subfield);
    }

    function changevalRecOrig(newval: any, subcol: string = '') {
      console.log('changevalRec', newval);
      // if (!props.insertMode || (props.insertMode && col.value.fieldtype !== costanti.FieldType.multioption)) {
      if (col.value && col.value.allowchar === costanti.ALLOWCHAR_CODE) {
        newval = tools.removespaces_slash(newval);
      }

      if (col.value.fieldtype === costanti.FieldType.username_telegram) {
        newval = tools.removeatIniziale(newval);
      }
      // console.log('popuppedit: changevalRec', newval, 'COLName', col.value.name)

      // console.log('row', props.row, 'col', props.mycol, 'newval', newval)
      // console.log('row[col.value.name]', props.row[col.value.name])
      if (props.type === costanti.FieldType.imagerec) {
        // console.log('image', newval)
      }

      if (props.type === costanti.FieldType.imgfile_sfuso) {
        newval = newval?.imagefile;
      }

      if (props.notAllowAtChar) {
        newval = tools.rimuoviAtPrimoCarattere(newval);
      }

      if (subcol) {
        const arrcol = col.value.name.split('.');
        if (arrcol.length > 0) {
          const primo = arrcol[0];
          let sec = null;
          if (arrcol.length > 1) sec = arrcol[1];
          if (sec) {
            if (!myrow.value[primo]) {
              myrow.value[primo] = {};
            }
            myrow.value[primo][sec] = newval;
          } else {
            myrow.value[primo] = newval;
          }
          /*if (!myrow.value[col.value.name]) {
            myrow.value[col.value.name] = {}
          }
          myrow.value[col.value.name][subcol] = newval*/
          // console.log('myrow.value[col.value.name]', myrow.value[col.value.name])
        }
      } else {
        myrow.value[col.value.name] = newval;
      }

      // console.log('changevalRec update:row', myrow.value)
      // emit('update:row', myrow.value)
      emit('update_col', col.value.name, newval);
      if (props.isInModif) OpenEdit();

      emit('save', newval);

      // }
    }

    function changevalRecHours(newval: any) {
      if (col.value.fieldtype === costanti.FieldType.hours) {
        newval = newval.value;
      }
      changevalRec(newval);

      myvalue.value = newval;
    }

    function updatedata() {
      mounted();
    }

    function mounted() {
      //console.log('mounted CMyPopupEdit')

      myrow.value = props.rec && props.isrec ? { ...props.rec } : { ...props.row };

      // console.log('myrow', myrow.value?.arrvariazioni?.[0])

      try {
        // console.log('mounted', 'isFieldDb()', myrow.value, 'sub', props.subfield, 'field', props.field)
        if (isFieldDb() && !props.isrec) {
          // console.log(' .  none...')
        } else {
          if (props.subfield !== '') {
            if (myrow.value[props.field] === undefined) {
              myrow.value[props.field] = {};
              myvalue.value = '';
            } else {
              myvalue.value = myrow.value[props.field][props.subfield];
            }
          } else {
            let miorecord = myrow.value;
            if (props.table === 'arrvariazioni') {
              miorecord = myrow.value.arrvariazioni[0];
            }

            if (props.field !== '') {
              myvalue.value = miorecord[props.field];
            } else {
              myvalue.value = myrow.value;
            }
            if (props.field2 !== '') {
              myvalue2.value = miorecord[props.field2];
            }
          }
          // console.log('props.field', props.field, 'props.subfield', props.subfield, 'myvalue: ', myvalue)
        }

        if (props.type === costanti.FieldType.verifica && !myvalue.value) {
          myvalue.value = {
            esito: costanti.VALIDATO.NO,
            username: '',
            note: '',
          };
        }
      } catch (e) {}

      if (props.subfield_to_see) {
        myvaltosee.value = myrow.value[props.field][props.subfield_to_see];
      }

      // console.log('popupedit: myvalue.value', myvalue.value)

      // console.log('myvalue.value', myvalue.value)
      myvalueprec.value = myvalue.value;

      crea();

      if (!loaded.value) {
        if (col.value.fieldtype === costanti.FieldType.listimages) {
          if (myvalue.value === '' || myvalue.value === undefined) {
            // console.log('set default myvalue.value ')
            myvalue.value = {
              title: 'Galleria',
              directory: 'none',
              list: [],
            };
          }
        } else if (col.value.fieldtype === costanti.FieldType.listobj) {
          if (myvalue.value === '' || myvalue.value === undefined) {
            // console.log('set default myvalue.value ')
            myvalue.value = [
              {
                type: 0, // Letto matrimoniale / letto singolo / divano-letto / almaca / a terra sul tappeto (per sacco a pelo)
                location: 0, // in camera privata / in camera condivisa / in soggiorno / in camper / in tenda / in giardino / all'aperto
                num: 0,
              },
            ];
          }
        } else if (col.value.fieldtype === costanti.FieldType.coordinates) {
          if (myvalue.value === '' || myvalue.value === undefined) {
            // console.log('set default myvalue.value ')
            myvalue.value = {
              address: '',
              coordinates: [0, 0],
            };
          }
          if (!myvalue.value.address) {
            myvalue.value.address = '';
          }
          if (!myvalue.value.coordinates) {
            myvalue.value.coordinates = [0, 0];
          }
        }
      }

      loaded.value = true;

      // console.log('MOUNTED - myvalue.value', myvalue.value)

      // console.log('myvalueprec', myvalueprec)
    }

    function refresh() {
      mounted();
    }

    function OpenEdit() {
      // console.log('OpenEdit')
      emit('show');
    }

    function OpenEditDateToday() {
      // console.log('OpenEdit')
      myvalue.value = new Date();
      emit('show');
    }

    /*function getval() {
      let myval: any = 'false'

      if ((props.subfield !== '') && (props.subfield !== '')) {
        if (myrow.value[props.field] === undefined) {
          myrow.value[props.field] = {}
          myval = ''
        } else {
          myval = myrow.value[props.field][props.subfield]
        }
      } else {
        if (props.field !== '')
          myval = myrow.value[props.field]
        else
          myval = myrow.value
      }

      return myval
    }*/

    async function SaveValueInt(newVal: any, valinitial: any) {
      console.log('SaveValueInt', newVal, valinitial);

      let copynewval = { ...newVal };

      let isEnd = false;

      if (copynewval.which === 'start' || copynewval.which === 'end') {
        newVal = copynewval.current;
        valinitial = copynewval.prev;
        if (copynewval.which === 'end') {
          isEnd = true;
        }
      }

      if (col.value.fieldtype === costanti.FieldType.verifica) {
        newVal.username = userStore.my.username;
        newVal.data = tools.getDateNow();
      }

      if (props.tablesel) {
        if (true) {
          const mystrcol = '_id';
          const mycol = fieldsTable.getColByTable(props.tablesel, mystrcol);

          if (mycol) {
            if (newVal) newVal = newVal[mystrcol];
          }
        }
      }

      if (props.notAllowAtChar) {
        newVal = tools.rimuoviAtPrimoCarattere(newVal);
        myvalue.value = newVal;
      }

      console.log('newVal', newVal);

      if (isFieldDb()) {
        if (isEnd) {
          await savefield2(newVal, valinitial, $q);
        } else {
          await savefield(newVal, valinitial, $q);
        }
      } else {
        let subfield = props.subfield;
        let field = props.field;
        if (isEnd) {
          subfield = props.subfield2;
          field = props.field2;
        }

        // Update value in table memory
        if (subfield !== '') {
          if (myrow.value[field] === undefined) myrow.value[field] = {};
          myrow.value[field][subfield] = newVal;
        } else {
          if (field !== '') myrow.value[field] = newVal;
          else {
            if (!props.isrec) {
              // @ts-ignore
              myrealrow.value = newVal;
            }
          }
        }
      }

      if (props.fieldsel_tosee) {
        const mystrcol = props.fieldsel_tosee;
        myvaltosee.value = copynewval[mystrcol];
      }

      console.log('SaveValueInt', newVal, valinitial);

      emit('save', newVal, valinitial, copynewval.which!);
    }

    async function savefield(value: any, initialval: any, myq: any) {
      if (!props.insertMode && !props.nosaveToDb) {
        let ret = null;
        myvalue.value = value;
        return tools.saveInDBForTypes(
          myq,
          props.field,
          myvalue.value,
          props.type,
          props.serv,
          props.table,
          props.subfield,
          props.id,
          props.indrec,
          props.mysubsubkey,
          props.specialField
        );
      }
    }
    async function savefield2(value: any, initialval: any, myq: any) {
      if (!props.insertMode && !props.nosaveToDb) {
        let ret = null;
        myvalue2.value = value;
        return tools.saveInDBForTypes(
          myq,
          props.field2,
          myvalue2.value,
          props.type,
          props.serv,
          props.table,
          props.subfield2,
          props.id,
          props.indrec,
          props.mysubsubkey,
          props.specialField
        );
      }
    }

    function annulla(val: any) {
      emit('annulla', true);
    }

    function Savedb(newVal: any, valinitial: any) {
      // console.log('Savedb', newVal)

      if (col.value.fieldtype === costanti.FieldType.boolean) {
        // console.log('myvalue', myvalue, newVal, myvalueprec)
        if (myvalueprec.value === undefined) {
          newVal = true;
          myvalueprec.value = myvalue.value;
          myvalue.value = newVal;
        }
        // console.log('DOPO myvalue', myvalue, newVal, myvalueprec)
      }

      // console.log('Savedb:   type', col.value.fieldtype);

      if (col.value.fieldtype === costanti.FieldType.imagerec) {
        console.log('newVal.imagefile', newVal);
        if (newVal === '') {
          myvalue.value = '';
        } else {
          myvalue.value = newVal;
        }
        // myvalue.value = tools.getImgFileToSaveByFilename(newVal)
      } else if (col.value.fieldtype === costanti.FieldType.imgfile_sfuso) {
        console.log('newVal.imagefile', newVal);
        if (newVal === '') {
          myvalue.value = '';
        } else {
          myvalue.value = newVal.imagefile;
          newVal = tools.getDirUpload() + mypath.value + myvalue.value;
        }
      } else if (col.value.fieldtype === costanti.FieldType.imgcard) {
        console.log('newVal.imagefile', newVal);
        myvalue.value = newVal;
      } else if (col.value.fieldtype === costanti.FieldType.image_and_filename) {
        newVal = tools.getDirUpload() + mypath.value + newVal;
        console.log('newVal.imagefile', newVal);
        myvalue.value = newVal;
      }

      if (col.value.fieldtype === costanti.FieldType.listobj) {
        myvalue.value.accomodation = newVal;
      }

      // console.log('Savedb', newVal)

      emit('showandsave', props.row, props.mycol, newVal, valinitial, myvaltosee.value);
      visueditor.value = false;
    }

    function visuValByType(val: any, col: IColGridTable, row: any) {
      if (col === undefined || row === undefined) return;

      // let val = ''
      // if (col.subfield !== '') {
      //   if (row[col.field] === undefined)
      //     row[col.field] = {}
      //
      //   val = row[col.field][col.subfield]
      // } else {
      //   val = row[col.field]
      // }
      //
      if (col.fieldtype === costanti.FieldType.date) {
        if (val === undefined) {
          return '[]';
        } else {
          return tools.getstrDateTime(val);
        }
      } else if (col.fieldtype === costanti.FieldType.onlydate) {
        if (val === undefined) {
          return '[]';
        } else {
          return tools.getstrDate(val);
        }
      } else if (col.fieldtype === costanti.FieldType.boolean) {
        return val ? t('dialog.yes') : t('dialog.no');
      } else if (col.fieldtype === costanti.FieldType.binary) {
        if (val === undefined) return '[---]';
        else return globalStore.getArrStrByValueBinary(col, val);
      } else if (
        col.fieldtype === costanti.FieldType.select ||
        col.fieldtype === costanti.FieldType.option
      ) {
        if (val === undefined) return '[---]';
        else return globalStore.getValueByTable(col, val);
      } else if (
        col.fieldtype === costanti.FieldType.nationality ||
        col.fieldtype === costanti.FieldType.select_by_server ||
        col.fieldtype === costanti.FieldType.multiselect_by_server
      ) {
        if (!val) return '[---]';
        else return val;
      } else if (col.fieldtype === costanti.FieldType.intcode) {
        if (!val) return '[---]';
        else return val;
      } else if (col.fieldtype === costanti.FieldType.multiselect) {
        if (val === undefined) return '[---]';
        else return globalStore.getMultiValueByTable(col, val);
      } else if (col.fieldtype === costanti.FieldType.multioption) {
        if (val === undefined) return '[---]';
        else return globalStore.getMultiValueByTable(col, val);
      } else if (col.fieldtype === costanti.FieldType.password) {
        if (val === undefined) return '[---]';
        else return '***************';
      } else {
        if (val === undefined || val === null) {
          if (props.canEdit)
            return ' <span class="text-grey">(' + t('reg.select') + ')</span> ';
          else return '';
        } else if (val === '') {
          if (props.canEdit)
            return ' <span class="text-grey">(' + t('reg.select') + ')</span> ';
          else return '';
        } else {
          let mystr = '';
          let mylink = '';

          if (col.link) mylink = col.link.replace(col.name, val);
          if (col.tipovisu === costanti.TipoVisu.LINK && col.link) {
            return "<a href='" + mylink + "'>" + val + '</a>';
          } else if (col.tipovisu === costanti.TipoVisu.BUTTON && col.link) {
            return '';
          }

          if (props.showall) {
            return val;
          } else {
            mystr = tools.firstchars(val, tools.MAX_CHARACTERS);
          }
          if (val) {
            if (val.length > tools.MAX_CHARACTERS) mystr += '...';
          } else {
            return val;
          }
          return mystr;
        }
      }
    }

    function getclassCol(mycol: any) {
      if (mycol) {
        let myclstr =
          mycol.disable || isviewfield() ? '' : props.canEdit ? 'colmodif' : '';
        myclstr +=
          mycol.fieldtype === costanti.FieldType.date ||
          mycol.fieldtype === costanti.FieldType.onlydate
            ? ' coldate flex flex-container'
            : '';

        return myclstr;
      } else {
        return '';
      }
    }

    function mycl() {
      if (props.disable) {
        return 'cldisable';
      }
    }

    function selectcountry({
      name,
      iso2,
      dialCode,
    }: {
      name: string;
      iso2: string;
      dialCode: string;
    }) {
      // console.log(name, iso2, dialCode)
      myvalueprec.value = myvalue.value;
      myvalue.value = iso2;
      countryname.value = name;
    }

    function intcode_change(coderec: any) {
      myvalueprec.value = myvalue.value;
      myvalue.value = '+' + coderec.dialCode;
    }

    function onInput(phone: any, phoneObject: any, input: any) {
      if (phoneObject?.formatted) {
        myvalue.value = phoneObject.formatted;
      }
    }

    function uploaded(info: any) {
      if (info.files) {
        if (info.files[0].name.imagefile) {
          myvalue.value =
            tools.geturlrelativeprofile() +
            '/' +
            getMyUsername() +
            '/' +
            info.files[0].name.imagefile;
        } else {
          myvalue.value =
            tools.geturlrelativeprofile() +
            '/' +
            getMyUsername() +
            '/' +
            info.files[0].name;
        }

        console.log('uploaded', myvalue.value);
        savefield(myvalue.value, '', $q);
      }
      // info.files[0].name
    }

    function removephoto() {
      myvalue.value = '';
      SaveValueInt(myvalue.value, '');
    }

    function noPopupeditByCol(mycol: IColGridTable) {
      return (
        mycol.fieldtype !== costanti.FieldType.html &&
        mycol.fieldtype !== costanti.FieldType.imagerec &&
        mycol.fieldtype !== costanti.FieldType.imgfile_sfuso &&
        mycol.fieldtype !== costanti.FieldType.imgcard &&
        mycol.fieldtype !== costanti.FieldType.listimages &&
        mycol.fieldtype !== costanti.FieldType.listobj &&
        mycol.fieldtype !== costanti.FieldType.number
      );
    }

    function getTitleEditor(col: IColGridTable, row: any) {
      let title = '';
      if (col.field_extra1) {
        try {
          title = tools.getValue(row, col.field_extra1, col.subfield_extra1);
        } catch (e) {}
      }

      return title;
    }

    function gotoPage(link: string) {
      $router.push(link);
    }

    function nameKeydown(e: any, col: any) {
      if (col.fieldtype === costanti.FieldType.username_telegram) {
        if (!/^[a-z0-9_]*$/i.test(e.key)) {
          e.preventDefault();
        }
      } else {
        if (col.allowchar === costanti.ALLOWCHAR_CODE) {
          if (/^\W$/.test(e.key)) {
            e.preventDefault();
          }
        }
      }
    }

    function handleCancel() {
      // Gestisci la chiusura del q-popup-edit
      console.log('Chiusura di q-popup-edit');
    }
    function handleKeydown(event) {
      // Interrompi la propagazione del tasto ESC
      if (event.key === 'Escape') {
        event.stopPropagation();
        console.log('Tasto ESC intercettato e bloccato');

        popupEditRef.value.hide();
      }
    }

    function updateValidazione(esito: any) {
      myvalue.value.esito = esito;
      myvalue.value.data = tools.getDateNow();
      myvalue.value.username = userStore.my.username;
      changevalRec(myvalue.value);
      Savedb(myvalue.value, '');
    }

    onBeforeMount(mounted);

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

    function openColorPicker() {
      // Apre la finestra del picker
      colorPicker.value.openDialog();
    }

    return {
      myvalue,
      myvalue2,
      countryname,
      visueditor,
      visuhtml,
      showeditor,
      isviewfield,
      changeval,
      changevalRec,
      addNewValue,
      changevalRecHours,
      updatedata,
      OpenEdit,
      OpenEditDateToday,
      SaveValueInt,
      annulla,
      Savedb,
      visuValByType,
      getclassCol,
      selectcountry,
      intcode_change,
      tools,
      costanti,
      fieldsTable,
      onInput,
      globalStore,
      userStore,
      removephoto,
      isFieldDb,
      col,
      myImgGall,
      noPopupeditByCol,
      getTitleEditor,
      myrow,
      shared_consts,
      nameKeydown,
      gotoPage,
      mypath,
      changeValRecCoordAddr,
      addstrrequired,
      t,
      handleKeydown,
      handleCancel,
      popupEditRef,
      copyToClipboard,
      updateValidazione,
      handleShowAndSave,
      openColorPicker,
      colorPicker,
      myColor,
      hoverPreview,
      myvaltosee,
      modeEdit,
    };
  },
});