<script setup>
import { computed, ref } from "vue";
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
const props = defineProps({
  imageFormat: { type: String, required: false, default: "image/jpeg" },
  maxHeight: { type: [String, Number], required: false },
  maxWidth: { type: [String, Number], required: false, default: 1024 },
  aspectRatio: { type: Number, required: false }
});
const imageData = defineModel({ type: String });
const emit = defineEmits(["close"]);
const cropper = ref();
const imageRef = ref();
const dragMode = ref("none");
function loadCropper() {
  if (cropper.value) cropper.value?.destroy();
  if (imageRef.value) {
    cropper.value = new Cropper(imageRef.value, {
      aspectRatio: props.aspectRatio,
      autoCrop: false,
      autoCropArea: 1
    });
  }
}
const setDragMode = (mode) => {
  cropper.value?.setDragMode(mode);
};
const rotateLeft90 = () => cropper.value?.rotate(-90);
const rotateLeft = () => cropper.value?.rotate(-5);
const rotateRight = () => cropper.value?.rotate(5);
const rotateRight90 = () => cropper.value?.rotate(90);
const flipHorizontal = () => cropper.value?.scaleX(cropper.value.getData().scaleX * -1);
const flipVertical = () => cropper.value?.scaleY(cropper.value.getData().scaleY * -1);
const zoomIn = () => cropper.value?.zoom(0.1);
const zoomOut = () => cropper.value?.zoom(-0.1);
const moveUp = () => cropper.value?.move(0, -10);
const moveDown = () => cropper.value?.move(0, 10);
const moveLeft = () => cropper.value?.move(-10, 0);
const moveRight = () => cropper.value?.move(10, 0);
const accept = () => {
  const croppedCanvas = cropper.value?.getCroppedCanvas();
  imageData.value = croppedCanvas?.toDataURL(props.imageFormat, 1);
};
const close = () => {
  emit("close");
};
const reset = () => {
  cropper.value?.reset();
  cropper.value?.clear();
};
const computedMaxWidth = computed(() => {
  if (typeof props.maxWidth === "number") {
    return `${props.maxWidth}px`;
  } else if (!isNaN(Number(props.maxWidth))) {
    return `${props.maxWidth}px`;
  }
  return props.maxWidth;
});
const computedMaxHeight = computed(() => {
  if (typeof props.maxHeight === "number") {
    return `${props.maxHeight}px`;
  } else if (!isNaN(Number(props.maxHeight))) {
    return `${props.maxHeight}px`;
  }
  return props.maxHeight;
});
</script>

<template>
  <div :style="{ maxWidth: computedMaxWidth, maxHeight: computedMaxHeight }">
    <v-card>
      <v-toolbar color="primary" dark>
        <v-btn-toggle v-model="dragMode" class="ml-1">
          <v-btn value="move" icon="mdi mdi-cursor-move" @click="setDragMode('move')"></v-btn>
          <v-btn value="crop" icon="mdi mdi-crop" @click="setDragMode('crop')"></v-btn>
        </v-btn-toggle>
        <v-btn-group class="ml-1">
          <v-btn value="rotateLeft" icon="mdi mdi-rotate-left-variant" @click="rotateLeft90"></v-btn>
          <v-btn value="rotateRight" icon="mdi mdi-rotate-left" @click="rotateLeft"></v-btn>
          <v-btn value="rotateRight" icon="mdi mdi-rotate-right" @click="rotateRight"></v-btn>
          <v-btn value="rotateRight" icon="mdi mdi-rotate-right-variant" @click="rotateRight90"></v-btn>
        </v-btn-group>
        <v-btn-group class="ml-1">
          <v-btn value="flipHorizontal" icon="mdi mdi-flip-horizontal" @click="flipHorizontal"></v-btn>
          <v-btn value="flipVertical" icon="mdi mdi-flip-vertical" @click="flipVertical"></v-btn>
        </v-btn-group>
        <v-btn-group class="ml-1">
          <v-btn value="flipHorizontal" icon="mdi mdi-magnify-plus-outline" @click="zoomIn"></v-btn>
          <v-btn value="flipVertical" icon="mdi mdi-magnify-minus-outline" @click="zoomOut"></v-btn>
        </v-btn-group>
        <v-btn-group class="ml-1">
          <v-btn value="moveUp" icon="mdi mdi-arrow-up" @click="moveUp"></v-btn>
          <v-btn value="moveDown" icon="mdi mdi-arrow-down" @click="moveDown"></v-btn>
          <v-btn value="moveLeft" icon="mdi mdi-arrow-left" @click="moveLeft"></v-btn>
          <v-btn value="moveRight" icon="mdi mdi-arrow-right" @click="moveRight"></v-btn>
        </v-btn-group>
        <v-spacer></v-spacer>
        <v-btn icon="mdi mdi-refresh" @click="reset"></v-btn>
        <v-btn icon="mdi mdi-check" @click="accept"></v-btn>
        <v-btn icon="mdi mdi-close" @click="close"></v-btn>
      </v-toolbar>
      <v-card-text class="ma-0 pa-0">
        <img ref="imageRef" :src="imageData" alt="" @load="loadCropper" style="display: block; max-width: 100%">
      </v-card-text>
    </v-card>
  </div>
</template>

<style>
.cropper-bg{background-repeat:repeat!important}
</style>
