import { jsx as o, jsxs as N } from "react/jsx-runtime";
import { l as O } from "./lodash.xuulwbEa.js";
import { C as x } from "./index.module.Db2VUAe1.js";
import { useState as c, useMemo as A, useEffect as D } from "react";
import { q as j } from "./index.dWlEA7uO.js";
import { a as q } from "./index.CfQlFjZU.js";
import { n as _ } from "./index.B0wX8xO7.js";
import { S as y } from "./shared.EdGf6tcG.js";
import { a as z } from "./Button.CpTwUWVr.js";
import { R as P } from "./RadioGroup.BSNFAoNq.js";
import { S as T } from "./Slider.CBfpi4Hu.js";
import { u as V, M as k } from "./modal.BZAvb1Nx.js";
const B = "creator_imageContainer_9sySg", G = "creator_cropperContainer_OOVcN", Y = "creator_container_NcRHg", Z = "creator_arrows_oPM7q", l = { imageContainer: B, cropperContainer: G, container: Y, arrows: Z }, E = {
  portrait: 4 / 5,
  square: 1 / 1,
  landscape: 5 / 4
}, F = ({
  fileToCrop: p,
  onCropAreaChange: m,
  onComplete: a,
  onCancel: C,
  cropAspectRatio: r
}) => {
  const { Modal: d, openModal: n } = V(), [h, u] = c({ x: 0, y: 0 }), [f, s] = c(1), [t, g] = c("portrait"), [S, i] = c(!1), M = (e) => {
    u(e);
  }, I = (e) => {
    s(e);
  }, R = p.src || "", w = A(() => Object.keys(E).map((e) => ({
    label: O.capitalize(e),
    value: e
  })), []);
  return D(() => {
    n();
  }, [n]), {
    crop: h,
    onCancelCrop: C,
    onCropChange: M,
    onCropAreaChange: m,
    onComplete: a,
    onInteractionStart: () => {
      i(!0);
    },
    onInteractionEnd: () => {
      i(!1);
    },
    showArrows: S,
    zoom: f,
    onZoomChange: I,
    imageSrc: R,
    imageContainerClass: l.imageContainer,
    containerClass: l.container,
    cropperClasses: {
      containerClassName: l.cropperContainer
    },
    aspectRatio: t,
    setAspectRatio: g,
    Modal: d,
    ratioOptions: w,
    currentRatio: r || E[t],
    showRatioOptions: !r
  };
}, H = ({
  Modal: p,
  crop: m,
  onCancelCrop: a,
  onCropChange: C,
  onCropAreaChange: r,
  onComplete: d,
  onInteractionStart: n,
  onInteractionEnd: h,
  showArrows: u,
  cropperClasses: f,
  zoom: s,
  onZoomChange: t,
  containerClass: g,
  imageContainerClass: S,
  imageSrc: i,
  aspectRatio: M,
  setAspectRatio: I,
  ratioOptions: R,
  currentRatio: w,
  showRatioOptions: b
}) => /* @__PURE__ */ o(
  p,
  {
    type: k.ADVANCED,
    heading: "Crop Image",
    buttons: [
      {
        label: "Done",
        semantic: y.PRIMARY,
        type: z.SUBMIT,
        onClick: () => d()
      },
      {
        label: "Cancel",
        semantic: y.SECONDARY,
        onClick: () => a()
      }
    ],
    onDismiss: () => a(),
    children: /* @__PURE__ */ N("div", { className: g, children: [
      /* @__PURE__ */ N("div", { className: S, children: [
        /* @__PURE__ */ o(
          x,
          {
            classes: f,
            image: i,
            crop: m,
            zoom: s,
            aspect: w,
            objectFit: "vertical-cover",
            restrictPosition: !0,
            showGrid: !1,
            onCropChange: C,
            onCropComplete: r,
            onZoomChange: t,
            onInteractionStart: n,
            onInteractionEnd: h
          }
        ),
        /* @__PURE__ */ o(
          _,
          {
            value: u,
            then: /* @__PURE__ */ o(j, { size: 24, className: l.arrows })
          }
        )
      ] }),
      /* @__PURE__ */ o(
        T,
        {
          label: "Size",
          step: 0.1,
          min: 1,
          max: 3,
          value: s,
          onChange: t
        }
      ),
      /* @__PURE__ */ o(
        _,
        {
          value: b,
          then: /* @__PURE__ */ o(
            P,
            {
              label: "Ratio",
              name: "ratio",
              options: R,
              selected: M,
              onSelected: (v) => I(v)
            }
          )
        }
      )
    ] })
  }
), ro = q(H, F);
export {
  ro as C
};
