import {computed, ref, watch} from "vue";
import {cropper} from "vue-picture-cropper";
import {roundWithPrecision} from "src/composables/utils";
import {photoAspectRatio} from "src/composables/photos/editor/photo";

export const cropperImgSizes = computed(() => [cropper.getImageData().width, cropper.getImageData().height]);
export const croppedArea = ref(null);
export const selectedAspectRatio = ref(null);

watch(() => selectedAspectRatio.value, (newVal) => {
  cropper.setAspectRatio(newVal);
})


export const setCropData = () => {
  const [w, h] = cropperImgSizes.value;

  console.log("crop end");

  const cropData = cropper.getCropBoxData();
  croppedArea.value = {
    left: roundWithPrecision(cropData.left / w, 5),
    top: roundWithPrecision(cropData.top / h, 5),
    width: roundWithPrecision(cropData.width / w, 5),
    height: roundWithPrecision(cropData.height / h, 5)
  };
}

export const aspectRatioOptions = computed(() =>
  [
    {label: '16:9', value: roundWithPrecision(16 / 9, 5)},
    {label: '4:3', value: roundWithPrecision(4 / 3, 5)},
    {label: '9:16', value: roundWithPrecision(9 / 16, 5)},
    {label: '3:4', value: roundWithPrecision(3 / 4, 5)},
    {label: '1:1', value: 1},
    {label: 'Volný', value: null},
    {label: 'Původní', value: roundWithPrecision(photoAspectRatio.value, 5)},
  ]
);

export const cropperReady = (e) => {
  if (croppedArea.value) {
    const [w, h] = cropperImgSizes.value;
    selectedAspectRatio.value = roundWithPrecision((croppedArea.value.width * w) / (croppedArea.value.height * h), 5);

    cropper.setCropBoxData({
      left: croppedArea.value.left * w,
      top: croppedArea.value.top * h,
      width: croppedArea.value.width * w,
      height: croppedArea.value.height * h
    });
  } else {
    selectedAspectRatio.value = roundWithPrecision(photoAspectRatio.value, 5);
  }
}