"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import { useState, Fragment } from "react";
import Dropzone from "react-dropzone";
import ReactCrop from "react-image-crop";
/* empty css                                                                                                             */
import { Modal } from "../../molecules/Modal/Modal.js";
import { getCroppedImg } from "../../utils/getCroppedImg.js";
import { Flex } from "../../atoms/Flex/Flex.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Button } from "../../molecules/Button/Button.js";
import { Text } from "../../atoms/Text/Text.js";
import { buildBorder } from "../../tokens/utils.js";
const ImageCropModal = ({ open, setOpen, trigger, onComplete }) => {
  const [image, setImage] = useState(null);
  const [imageElement, setImageElement] = useState(null);
  const [fileName, setFileName] = useState(null);
  const [crop, setCrop] = useState({
    unit: "px",
    width: 150,
    height: 150,
    y: 10,
    x: 100
  });
  const onDrop = (files) => {
    const file = files[0];
    if (file) {
      setImage(URL.createObjectURL(file));
      setFileName(file.name);
    }
  };
  const onImageLoaded = (imageElement2) => {
    setImageElement(imageElement2);
    const size = Math.min(imageElement2.width, imageElement2.height) - 10;
    setCrop((crop2) => ({
      ...crop2,
      width: size,
      height: size
    }));
    return false;
  };
  const complete = () => {
    if (!imageElement || !fileName) {
      return;
    }
    const croppedImage = getCroppedImg(imageElement, crop);
    onComplete(croppedImage, fileName);
  };
  return /* @__PURE__ */ jsx(
    Modal,
    {
      open,
      setOpen,
      trigger,
      title: "Select Image",
      cancelButton: "Cancel",
      actionButton: {
        text: "Crop and Upload",
        action: () => complete(),
        disabled: image == null || imageElement == null || fileName == null
      },
      children: image ? /* @__PURE__ */ jsxs(Flex.Column, { sx: { height: "inherit", alignItems: "center", width: "100%" }, children: [
        /* @__PURE__ */ jsx(
          Flex.Row,
          {
            sx: {
              justifyContent: "center",
              alignItems: "center",
              bg: "Midnight4",
              width: "450px",
              mb: Spacing["32px"],
              ".ReactCrop__crop-mask, .ReactCrop__drag-elements": {
                height: "100%"
              }
            },
            children: /* @__PURE__ */ jsx(
              ReactCrop,
              {
                crop,
                onChange: setCrop,
                aspect: 1,
                keepSelection: true,
                sx: { width: "auto", maxWidth: "450px", height: "auto", maxHeight: "450px", display: "block" },
                children: /* @__PURE__ */ jsx("img", { src: image, alt: "Uploaded image", onLoad: (event) => onImageLoaded(event.currentTarget) })
              }
            )
          }
        ),
        /* @__PURE__ */ jsx(Flex.Row, { sx: { justifyContent: "center", alignItems: "center", gap: Spacing["16px"] }, children: /* @__PURE__ */ jsx(Button.Tertiary, { onClick: () => setImage(null), children: "Pick another image" }) })
      ] }) : /* @__PURE__ */ jsx(Dropzone, { onDrop, children: ({ getRootProps, getInputProps, isDragActive }) => /* @__PURE__ */ jsxs(
        Flex.Column,
        {
          ...getRootProps(),
          sx: {
            justifyContent: "center",
            alignItems: "center",
            height: "450px",
            width: "450px",
            border: isDragActive ? "none" : buildBorder("Purple", "2px", "DASHED")
          },
          children: [
            /* @__PURE__ */ jsx("input", { ...getInputProps(), accept: ".jpg,.jpeg,.png" }),
            /* @__PURE__ */ jsx(Text.P16, { color: isDragActive ? "Purple" : "Text", weight: "MEDIUM", sx: { my: Spacing["8px"] }, children: isDragActive ? "Drop the Image to Upload" : "Drag and Drop an Image" }),
            !isDragActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx("span", { sx: { color: "White64", textTransform: "uppercase", m: Spacing["32px"] }, children: "or" }),
              /* @__PURE__ */ jsx(Button.Primary, { children: "Choose an Image" })
            ] }) : null
          ]
        }
      ) })
    }
  );
};
export {
  ImageCropModal
};
