import { jsxs as s, jsx as t } from "react/jsx-runtime";
/* empty css                   */
/* empty css                    */
import { InfoIcon as Q } from "./index-InfoIcon.js";
import { useToggle as X } from "./index-useToggle.js";
import { mt2 as ee, gap2 as oe, dFlexColumn as te } from "./index-general.module.js";
import { classNames as I } from "./index-classNames.js";
import { Collapse as re } from "./index-Collapse.js";
import { galleryFindRational as T } from "./index-gallery-find-rational.js";
import { Slider as ie } from "./index-Slider.js";
import { useRef as M, useState as k, useEffect as C } from "react";
import { Cropper as R } from "./index-react-cropper.es.js";
import { Button as O, ButtonTypes as F } from "./index-Button.js";
import { Icon as L, IconSize as ne } from "./index-Icon.js";
import { IconNames as W } from "./index-IconNames.js";
import { Modal as ae } from "./index-Modal.js";
import { ModalBody as se } from "./index-ModalBody.js";
import { ModalHeader as ce } from "./index-ModalHeader.js";
import { Text as l, TextTypes as j, FontWeights as le } from "./index-Text.js";
const v = "--rc-cropper-sidebar-width", V = "--rc-cropper-border-width", Ae = (x) => {
  const {
    save: b,
    close: h,
    imageFile: f,
    closeAfterCrop: G = !0
  } = x, g = {
    aspectRatio: 1,
    viewMode: 0,
    dragMode: "move",
    responsive: !0,
    restore: !0,
    checkCrossOrigin: !0,
    checkOrientation: !0,
    rotatable: !1,
    scalable: !0,
    modal: !0,
    guides: !1,
    center: !1,
    highlight: !1,
    background: !1,
    autoCrop: !0,
    movable: !0,
    zoomable: !0,
    zoomOnTouch: !1,
    zoomOnWheel: !1,
    cropBoxMovable: !1,
    cropBoxResizable: !1,
    toggleDragModeOnDblclick: !1,
    ...x
  }, i = M(null), n = M(null), [U, _] = k(!1), [Z, q] = X(!1), [w, H] = k("");
  let d = 0;
  const {
    aspectRatio: c,
    secondaryAspectRatio: p
  } = g;
  C(() => {
    const e = document.querySelector(":root");
    if (c && p) {
      const {
        numerator: o,
        denominator: r
      } = T(c), {
        numerator: a,
        denominator: m
      } = T(p), P = r / m, y = a * P, u = (o - y) / o * 100 / 2;
      e == null || e.style.setProperty(v, `${u}%`), e == null || e.style.setProperty(V, "1px");
    }
    p || (e == null || e.style.setProperty(v, "0%"), e == null || e.style.setProperty(V, "0px"));
  }, [c, p]), C(() => {
    if (f) {
      const e = new FileReader();
      e.onload = () => {
        typeof e.result == "string" && H(e.result);
      }, e.readAsDataURL(f);
    }
  }, [f]), C(() => {
    setTimeout(() => {
      B();
    }, 0);
  }, [i.current, n.current]);
  const z = (e) => {
    b(e), G && h();
  }, B = () => {
    var u, D, A, S, E;
    const e = (u = i == null ? void 0 : i.current) == null ? void 0 : u.cropper, o = (D = n == null ? void 0 : n.current) == null ? void 0 : D.cropper;
    if (!e || !o)
      return !1;
    const r = getComputedStyle(document.body), a = parseInt(r.getPropertyValue(v)), m = ((A = e.canvasData) == null ? void 0 : A.left) - ((S = e.cropBoxData) == null ? void 0 : S.width) * (a / 100);
    o.moveTo(m, (E = e.canvasData) == null ? void 0 : E.top);
    const {
      width: P,
      ...y
    } = e.cropBoxData ?? {};
    o.setCropBoxData({
      ...y
    }), o.setData({
      ...e.data
    });
  }, Y = (e, o) => {
    if (!(i != null && i.current) || !(i != null && i.current.cropper) || !(n != null && n.current) || !(n != null && n.current.cropper))
      return;
    let r, a;
    o > d ? (r = o - d, a = !0) : (r = d - o, a = !1);
    for (let m = 0; m < r; m++)
      i.current.cropper.zoom(a ? 0.02 : -0.02), n.current.cropper.zoom(a ? 0.02 : -0.02);
    d = o;
  }, $ = (e) => {
    if (!(!(e != null && e.current) || !(e != null && e.current.cropper)))
      return e.current.cropper.getCroppedCanvas({
        fillColor: "#fff"
      });
  }, N = async (e) => {
    const o = $(e);
    return new Promise((r) => {
      o == null || o.toBlob((a) => {
        r(a);
      });
    });
  }, J = () => {
    _(!0), typeof b == "function" && Promise.all([N(i), N(n)]).then(([e, o]) => {
      _(!1);
      const r = e ? {
        file: e,
        filePriority: "primary"
      } : void 0, a = o ? {
        file: o,
        filePriority: "secondary"
      } : void 0;
      p ? r && a && z([r, a]) : r && z([r]);
    });
  }, K = () => {
    if (c === 1)
      return {
        aspect_ratio_values: "1:1",
        min_height: "250",
        min_width: "250",
        max_height: "500",
        max_width: "500"
      };
    if (c === 16 / 9)
      return {
        aspect_ratio_values: "16:9",
        min_height: "270",
        min_width: "480",
        max_height: "1192",
        max_width: "2120"
      };
  };
  return s(ae, {
    className: "Cropper-modal",
    modalPosition: "center",
    maxWidth: "900px",
    children: [t(ce, {
      closeFn: h,
      children: t(l, {
        fontWeight: le.bold,
        type: j.heading4,
        children: "Crop your photo"
      })
    }), s(se, {
      children: [t(R, {
        className: "CropperBase-container",
        src: w,
        ref: i,
        ...g,
        aspectRatio: c,
        cropmove: () => {
          B();
        }
      }), t(R, {
        className: I("CropperBase-container", "CropperBase-hidden"),
        src: w,
        ref: n,
        ...g,
        aspectRatio: p
      }), t("div", {
        className: "Cropper-slider-container",
        children: s("div", {
          className: "Cropper-slider",
          children: [t(L, {
            color: "--n000",
            children: W.remove
          }), t(ie, {
            value: 0,
            min: -50,
            max: 50,
            step: 1,
            valueLabelDisplay: "auto",
            type: "simple",
            size: "small",
            onChange: Y
          }), t(L, {
            color: "--n000",
            children: W.add
          })]
        })
      })]
    }), s("div", {
      className: "modal-footer",
      children: [s("div", {
        className: "Cropper-footer-action-container",
        children: [s("span", {
          onClick: q,
          className: "Cropper-footer-info-details",
          children: [t(Q, {
            size: ne.small
          }), t(l, {
            type: j.text,
            color: "--p500",
            children: "Cropping details"
          })]
        }), s("div", {
          className: "action-buttons",
          children: [t(O, {
            type: F.default,
            onClick: h,
            children: "Cancel"
          }), t(O, {
            type: F.primary,
            onClick: J,
            isLoading: U,
            children: "Save"
          })]
        })]
      }), t(re, {
        isOpen: Z,
        children: s("div", {
          className: I(te, oe, ee),
          children: [t(l, {
            children: "To ensure the image is presented in the best possible way, you can use the zoom feature, enabling you to fit more or less content in to the crop area"
          }), t(l, {
            children: "If you would only like to upload a certain section of an image, you can do so by moving the cropping tool borders over the desired area of the picture"
          }), t(l, {
            children: "You can enlarge and minimize the crop size by clicking and dragging the cropping borders"
          }), c && t(l, {
            replacements: K(),
            children: "Uploaded images must have a %aspect_ratio_values% aspect ratio, with a minimum size of %min_height%px tall and %min_width%px wide and a maximum size of %max_height%px tall and %max_width%px wide."
          }), t(l, {
            children: "File size must be between 10kb and 5MB."
          })]
        })
      })]
    })]
  });
};
export {
  Ae as RcCropper
};
