import type { PropType } from 'vue';
import { defineComponent, ref, computed, toRef, reactive, watch } from 'vue'
import type { ISize } from 'model';
import { IOperators } from 'model'

import { useI18n } from 'vue-i18n'
import { useQuasar } from 'quasar'

import { tools } from '@tools'

import { CMySlider } from '@src/components/CMySlider'

import { shared_consts } from '@src/common/shared_vuejs'

export default defineComponent({
  name: 'CMySize',
  emits: ['update:modelValue'],
  components: { CMySlider },
  props: {
    modelValue: {
      type: Object as PropType<ISize>,
      required: true,
      default: () => ({
        width: '',
        height: '',
        gap: '',
        fit: '',
      }),
    },
    label: {
      type: String,
      required: true,
    },
    disable: {
      type: Boolean,
      required: false,
      default: false,
    },
    gap: {
      type: Boolean,
      required: false,
      default: false,
    },
    fit: {
      type: Boolean,
      required: false,
      default: false,
    },
    addstr: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()

    const ratio = ref(<number>0)
    const keepRatio = ref(false)

    const internalModel = reactive({ ...props.modelValue })

    function modifValueWidth(value: any, changeratio: boolean = true) {
      emit('update:modelValue', { ...internalModel, width: value });

      if (keepRatio.value && changeratio) {
        const ris = tools.getValueAndSuffix(value)
        const myheight = ris.value * (1 / ratio.value)
        modifValueHeight(myheight + ris.suffix, false)
      }
    }

    function modifValueHeight(value: any, changeratio: boolean = true) {
      emit('update:modelValue', { ...internalModel, height: value });

      if (keepRatio.value && changeratio) {
        const ris = tools.getValueAndSuffix(value)
        const mywidth = ris.value * (ratio.value)
        modifValueWidth(mywidth + ris.suffix, false)
      }
    }

    function modifValueGap(value: any) {
      emit('update:modelValue', { ...internalModel, gap: value });
    }
    function modifValueFit(value: any) {
      emit('update:modelValue', { ...internalModel, fit: value });
    }

    function modifValueRatio(value: any) {
      // modifValueWidth(0)

    }

    // Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
    watch(() => props.modelValue, (newModel: any) => {
      Object.assign(internalModel, newModel);

      if (internalModel.height && internalModel.width) {
        const heightValue = parseFloat(internalModel.height) || 1;

        if (heightValue === 0) {
          ratio.value = parseFloat(internalModel.width) / 1; // Usa 1 come fallback
        } else {
          ratio.value = parseFloat(internalModel.width) / heightValue;
        }
      }

    }, { immediate: true });

    return {
      t,
      shared_consts,
      modifValueWidth,
      modifValueHeight,
      modifValueRatio,
      modifValueGap,
      modifValueFit,
      internalModel,
      ratio,
      tools,
      keepRatio,
    }
  }
})
