import { jsx as e, jsxs as o } from "@emotion/react/jsx-runtime";
import { useState as L, useEffect as $ } from "react";
import { useHostTools as W, useEnvironment as Y, useModuleDictionary as B } from "@m4l/core";
import K from "lodash-es/isString";
import { useDropzone as V } from "react-dropzone";
import { useComponentSize as G } from "../../../../../../hooks/useComponentSize/index.js";
import { getPropDataTestId as w } from "../../../../../../test/getNameDataTestId.js";
import { Image as C } from "../../../../../Image/Image.js";
import { Typography as q } from "@m4l/base";
import { RHF_UPLOAD_IMAGE_KEY_COMPONENT as p } from "../../constants.js";
import { UploadImageSlots as g } from "../../slots/RHFUploadImageEnum.js";
import { UploadImageRootStyled as J, ContentModuleLayoutStyled as Q, ContainPreviewStyled as X, IconButtonRemoveStyled as Z, PreviewFallbackStyled as ee, TypographyStyled as l, ContentImageStyled as te, ContentImageTextStyled as oe, ContentMessageStyled as ie, DividerStyled as b, ButtonStyled as ne } from "../../slots/RHFUploadImageSlots.js";
import { getUploadImageDictionary as r, COMPONENTS_DICTIONARY_KEYS as a } from "./dictionary.js";
import { getComponentClasses as re } from "../../../../../../utils/getComponentSlotRoot.js";
const ze = (D) => {
  const {
    file: i,
    size: u,
    onDrop: R,
    onRemove: x,
    maxSize: E,
    dataTestId: h,
    error: P = !1,
    multiple: ae,
    disabled: f,
    imageFit: S,
    height: d,
    maxHeight: m,
    ...k
  } = D, { currentSize: c } = G(u), { toast: T } = W(), t = c === "small" || c === "medium" ? c : "medium", { getInputProps: M, getRootProps: O, open: j, isDragReject: N, isDragAccept: U } = V({
    multiple: !1,
    accept: { "image/png": [], "image/jpeg": [], "image/gif": [], "image/ico": [], "image/vnd.microsoft.icon": [], "image/x-icon": [], "image/svg+xml": [] },
    onDrop: R,
    /**
     * Runs when a dropped file is rejected (type/size/etc.).
     */
    onDropRejected: (A) => {
      A.forEach((_) => {
        T(
          { title: _.file.name, description: _.errors[0].message },
          { type: "error" }
        );
      });
    },
    noClick: !0,
    maxSize: E,
    ...k
  }), { host_static_assets: v, environment_assets: y } = Y(), { getLabel: n } = B(), I = K(i) ? i : i?.preview || "", [F, z] = L(!1);
  $(() => {
    z(!1);
  }, [I]);
  const s = {
    isDragReject: N,
    isDragAccept: U,
    error: P,
    hasFile: !!i,
    height: d,
    maxHeight: m
  }, H = re(p, g);
  return /* @__PURE__ */ e(
    J,
    {
      className: H.uploadImageRoot,
      ownerState: { ...s },
      ...w(p, g.uploadImageRoot, h),
      children: /* @__PURE__ */ o(
        Q,
        {
          ownerState: { ...s },
          ...w(p, g.contentModuleLayout, h),
          ...O(),
          children: [
            i ? /* @__PURE__ */ o(
              X,
              {
                ownerState: { ...s, imageFit: S, height: d, maxHeight: m },
                children: [
                  /* @__PURE__ */ e(
                    Z,
                    {
                      variant: "contained",
                      icon: `${v}/${y}/frontend/components/chip/assets/icons/closeSmall.svg`,
                      onClick: x,
                      size: t,
                      disabled: f
                    }
                  ),
                  F ? /* @__PURE__ */ o(ee, { ownerState: { ...s, imageFit: S, height: d, maxHeight: m }, children: [
                    /* @__PURE__ */ e(l, { variant: "bodyDens", size: t, children: n(r(a.preview_unavailable_title)) }),
                    /* @__PURE__ */ e(l, { variant: "bodyStandard", size: t, children: n(r(a.preview_unavailable_description)) })
                  ] }) : /* @__PURE__ */ e(
                    C,
                    {
                      src: I,
                      enableIntersectionObserver: !1,
                      onError: () => {
                        z(!0);
                      }
                    }
                  )
                ]
              }
            ) : /* @__PURE__ */ o("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }, children: [
              /* @__PURE__ */ e(
                "input",
                {
                  ...M()
                }
              ),
              /* @__PURE__ */ o(te, { children: [
                /* @__PURE__ */ o(oe, { children: [
                  /* @__PURE__ */ e(
                    C,
                    {
                      height: 100,
                      width: 100,
                      sizes: u,
                      src: `${v}/${y}/frontend/components/RHFUploadImage/assets/icons/uploadImage.svg`
                    }
                  ),
                  /* @__PURE__ */ e(q, { skeletonWidth: 100, variant: "bodyDens", size: t, children: n(r(a.title_upload)) })
                ] }),
                /* @__PURE__ */ e(l, { skeletonWidth: 200, skeletonRows: 2, variant: "bodyStandard", size: t, children: n(r(a.description)) }),
                /* @__PURE__ */ o(ie, { children: [
                  /* @__PURE__ */ e(b, { orientation: "horizontal", customVariant: "solid", size: t }),
                  /* @__PURE__ */ e(l, { skeletonWidth: 10, variant: "bodyStandard", size: t, children: n(r(a.divider_text)) }),
                  /* @__PURE__ */ e(b, { orientation: "horizontal", customVariant: "solid", size: t })
                ] })
              ] })
            ] }),
            i ? null : /* @__PURE__ */ e(ne, { variant: "contained", color: "primary", onClick: j, label: n(r(a.click_button)), size: t, disabled: f })
          ]
        }
      )
    }
  );
};
export {
  ze as UploadImage
};
