<script lang="ts">
  import EasyCropperjs from "@cloudparker/easy-cropperjs-svelte";

  let easyCropperjsRef: EasyCropperjs | null = $state(null);
  let file: File = $props();

  // Функция для обработки обрезанного изображения
  async function handleCrop() {
    const data = await easyCropperjsRef?.crop({
      outputWidth: 512, // Ширина обрезанного изображения
      outputFormat: "png", // Формат обрезанного изображения
      outputQuality: 0.6, // Качество
      outputType: "file", // Тип данных
    });

    // Если данные обрезки получены и это Blob
    if (data instanceof Blob) {
      const downloadLink = document.createElement("a"); // Создаем элемент <a> для скачивания
      downloadLink.href = URL.createObjectURL(data); // Создаем URL для обрезанного изображения
      downloadLink.download = "cropped_image.png"; // Имя файла для скачивания
      downloadLink.click(); // Имитируем клик для скачивания
    } else {
      console.log("Нет данных для скачивания");
    }
  }

  // Получение результата обрезки
  function handleCropResult(ev: CustomEvent) {
    let base64ImageUrl: string = ev.detail;
    // Используйте base64ImageUrl по вашему усмотрению
  }

  // Функция для получения файла
  async function getFile(url: string) {
    const fileName = url.split("/").pop() || "file.png";
    const blob = await (await fetch(url)).blob();
    const file = new File([blob], fileName, { type: blob.type });
    return file;
  }
</script>

<div class="p-4">
  <div
    class="w-[512px] h-[512px] overflow-hidden relative border-2 border-gray-300"
  >
    {#if file}
      <EasyCropperjs
        bind:this={easyCropperjsRef}
        outputAspectRatio={1}
        inputImageFile={file}
        onCrop={handleCropResult}
      />
    {/if}
  </div>

  <!-- Кнопка для обрезки изображения -->
  <button
    onclick={handleCrop}
    class="mt-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-700"
  >
    Crop
  </button>
</div>
