import { n as e } from "../chunks/button-CC0Jdx1j.js";
import { r as t } from "../chunks/grid-ByIIytjh.js";
import { o as n } from "../chunks/input-CZLUUggm.js";
import { i as r, n as i, r as a } from "../chunks/modal-C0j0hEIt.js";
import { t as o } from "../chunks/input-files-aB8iaqGk.js";
import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
import h from "react-easy-crop";
//#region src/image/ui/ImageCropper.tsx
function g({ image: e, aspect: t = 1200 / 630, width: n, onCropComplete: r }) {
	let [i, a] = d({
		x: 0,
		y: 0
	}), [o, c] = d(1), l = s((e, t) => {
		r?.(t);
	}, [r]);
	return /* @__PURE__ */ p("div", {
		style: {
			position: "relative",
			width: n ?? "100%",
			aspectRatio: t
		},
		children: /* @__PURE__ */ p(h, {
			image: e,
			crop: i,
			zoom: o,
			aspect: t,
			onCropChange: a,
			onZoomChange: c,
			onCropComplete: l,
			zoomSpeed: .1,
			objectFit: "contain"
		})
	});
}
//#endregion
//#region src/image/ui/ImagePlaceholder.tsx
function _({ width: e = "100%", height: t = "100%", aspectRatio: n = "16 / 9", className: r }) {
	return /* @__PURE__ */ p("div", {
		style: {
			width: e,
			height: t,
			aspectRatio: n
		},
		className: r,
		children: /* @__PURE__ */ p("svg", {
			width: e,
			height: t,
			viewBox: "0 0 200 200",
			xmlns: "http://www.w3.org/2000/svg",
			role: "img",
			fill: "none",
			rx: "10",
			ry: "10",
			style: { display: "block" },
			"aria-label": "Изображение недоступно",
			children: /* @__PURE__ */ m("g", {
				fill: "var(--surface-0)",
				children: [
					/* @__PURE__ */ p("rect", {
						x: "40",
						y: "50",
						width: "120",
						height: "100",
						rx: "10"
					}),
					/* @__PURE__ */ p("circle", {
						cx: "60",
						cy: "70",
						r: "8",
						fill: "var(--surface-2)"
					}),
					/* @__PURE__ */ p("path", {
						d: "M50 130 L75 100 L100 130 Z",
						fill: "var(--surface-2)"
					}),
					/* @__PURE__ */ p("path", {
						d: "M90 130 L120 90 L150 130 Z",
						fill: "var(--surface-2)"
					}),
					/* @__PURE__ */ p("line", {
						x1: "160",
						y1: "40",
						x2: "40",
						y2: "160",
						stroke: "var(--surface-0)",
						strokeWidth: "15",
						strokeLinecap: "round"
					}),
					/* @__PURE__ */ p("line", {
						x1: "160",
						y1: "40",
						x2: "40",
						y2: "160",
						stroke: "var(--surface-2)",
						strokeWidth: "5",
						strokeLinecap: "round"
					})
				]
			})
		})
	});
}
//#endregion
//#region src/image/ui/ImageRenderer.tsx
function v({ src: e, sources: t, alt: n, role: r, ariaLabel: i, caption: a, fallback: o, useFigure: s = !1, width: l = "100%", height: h = "100%", aspectRatio: g = "16 / 9", style: v, wrapperStyle: y, ...b }) {
	let x = u(null), [S, C] = d(0), [w, T] = d(!1), [E, D] = d(!1), [O, k] = d(!1);
	c(() => {
		let e = new IntersectionObserver(([t]) => {
			if (t.isIntersecting) {
				let n = Math.round(t.boundingClientRect.width);
				C(n), T(!0), e.disconnect();
			}
		}, {
			rootMargin: "100px",
			threshold: .01
		});
		return x.current && e.observe(x.current), () => e.disconnect();
	}, []);
	let A = S ? `${S}px` : "100vw", j = /* @__PURE__ */ p(_, {
		width: l,
		height: h,
		aspectRatio: g
	}), M = /* @__PURE__ */ m(f, { children: [
		!E && !O && (o || j),
		w && !O && /* @__PURE__ */ m("picture", { children: [t?.map((e) => /* @__PURE__ */ p("source", {
			srcSet: e.srcSet,
			type: e.type,
			sizes: e.sizes ?? A
		}, `${e.type ?? "source"}-${e.srcSet}`)), /* @__PURE__ */ p("img", {
			src: e,
			alt: n,
			role: r,
			"aria-label": i,
			onLoad: () => D(!0),
			onError: () => k(!0),
			style: E ? {
				width: "100%",
				height: "100%",
				objectFit: "cover",
				...v
			} : { display: "none" },
			"aria-busy": !E,
			width: "100%",
			height: "100%",
			...b
		})] }),
		O && j
	] }), N = /* @__PURE__ */ p("div", {
		ref: x,
		style: {
			width: l,
			height: h,
			aspectRatio: g,
			...y
		},
		children: M
	});
	return s ? /* @__PURE__ */ m("figure", {
		className: "relative",
		children: [N, a && /* @__PURE__ */ p("figcaption", {
			style: {
				bottom: 2,
				right: 2,
				maxWidth: "calc(100% - 4px)"
			},
			className: "absolute paddingInlineMd textRight radiusSm fontSizeSm",
			children: a
		})]
	}) : N;
}
//#endregion
//#region src/image/ui/ImageSelection.tsx
function y(e, t) {
	return `${e.file.meta.name}-${e.file.meta.size}-${e.file.meta.lastModified}-${t}`;
}
function b({ value: e, defaultValue: t, disabled: n, onChange: r, onApply: i }) {
	let a = e !== void 0, [o, c] = d(e ?? t ?? []), [u, f] = d(e), [p, m] = d(0), [h, g] = d({});
	a && e !== u && (f(e), c(e ?? []));
	let _ = s((e) => {
		c((t) => e(t));
	}, []), v = l(() => o.map((e) => e.file), [o]), b = o.length === 0 ? 0 : Math.min(p, o.length - 1), x = o[b], S = x ? y(x, b) : void 0, C = S ? h[S] ?? {
		crop: {
			x: 0,
			y: 0
		},
		zoom: 1
	} : {
		crop: {
			x: 0,
			y: 0
		},
		zoom: 1
	}, w = o.length > 0, T = !n && w && o.every((e) => e.alt.trim() && e.crop), E = s((e) => {
		_((t) => e.map((e) => {
			let n = t.find((t) => t.file.file === e.file);
			return n ? {
				...n,
				file: e
			} : {
				file: e,
				alt: ""
			};
		}));
	}, [_]), D = s((e) => {
		_((t) => t.map((t, n) => n === b ? {
			...t,
			alt: e
		} : t));
	}, [b, _]), O = s((e) => {
		_((t) => t.map((t, n) => n === b ? {
			...t,
			crop: e
		} : t));
	}, [b, _]), k = s((e) => {
		S && g((t) => ({
			...t,
			[S]: {
				crop: e,
				zoom: t[S]?.zoom ?? 1
			}
		}));
	}, [S]), A = s((e) => {
		S && g((t) => ({
			...t,
			[S]: {
				crop: t[S]?.crop ?? {
					x: 0,
					y: 0
				},
				zoom: e
			}
		}));
	}, [S]);
	return {
		value: o,
		files: v,
		activeIndex: b,
		activeImage: x,
		activeCropperState: C,
		hasSelected: w,
		canApply: T,
		apply: s(() => {
			r?.(o), i?.(o);
		}, [
			o,
			i,
			r
		]),
		setFiles: E,
		setActiveIndex: m,
		setActiveAlt: D,
		setActiveCrop: O,
		setActiveCropperCrop: k,
		setActiveCropperZoom: A
	};
}
function x() {
	if (typeof __IMAGE_UPLOAD_MAX_BYTES__ == "number") return __IMAGE_UPLOAD_MAX_BYTES__;
}
function S(e, t, n) {
	if (!e.crop || !t) return {
		width: "100%",
		aspectRatio: n,
		objectFit: "cover",
		display: "block"
	};
	let r = e.crop;
	return {
		position: "absolute",
		left: `${-(r.x / r.width) * 100}%`,
		top: `${-(r.y / r.height) * 100}%`,
		width: `${t.width / r.width * 100}%`,
		height: `${t.height / r.height * 100}%`,
		maxWidth: "none"
	};
}
function C({ aspect: e = 16 / 9, disabled: r, state: i }) {
	let a = i.activeImage?.crop, [s, c] = d({});
	return /* @__PURE__ */ m(t, {
		gap: "md",
		children: [
			/* @__PURE__ */ p(o, {
				label: "Файл изображения",
				allowedMime: [
					"image/jpeg",
					"image/png",
					"image/webp",
					"image/avif"
				],
				value: i.files,
				onChange: i.setFiles,
				maxBytes: x(),
				onReadError: (e) => console.log("e", e)
			}),
			i.hasSelected && i.activeImage && /* @__PURE__ */ m("div", { children: [
				/* @__PURE__ */ p(t, {
					templateColumns: "repeat(auto-fill, minmax(10em, 1fr))",
					gap: "xs",
					children: i.value.map((t, n) => {
						let a = y(t, n);
						return /* @__PURE__ */ p("button", {
							type: "button",
							disabled: r,
							onClick: () => i.setActiveIndex(n),
							style: {
								padding: 0,
								border: n === i.activeIndex ? "2px solid var(--border-accent)" : "2px solid transparent",
								background: "transparent",
								cursor: r ? "default" : "pointer"
							},
							children: /* @__PURE__ */ p("span", {
								style: {
									position: "relative",
									display: "block",
									width: "100%",
									aspectRatio: e,
									overflow: "hidden"
								},
								children: /* @__PURE__ */ p("img", {
									src: t.file.dataUrl,
									style: S(t, s[a], e),
									onLoad: (e) => {
										let t = e.currentTarget;
										c((e) => ({
											...e,
											[a]: {
												width: t.naturalWidth,
												height: t.naturalHeight
											}
										}));
									}
								})
							})
						}, a);
					})
				}),
				/* @__PURE__ */ m("div", { children: [
					"Выберите область изображения",
					" ",
					a && (a.width < 1200 ? /* @__PURE__ */ m("code", {
						className: "statusError",
						children: [
							a.width,
							"x",
							a.height,
							" - низкое качество изображения!"
						]
					}) : /* @__PURE__ */ m("code", {
						className: "statusSuccess",
						children: [
							a.width,
							"x",
							a.height
						]
					}))
				] }),
				/* @__PURE__ */ p("div", {
					style: {
						position: "relative",
						width: "100%",
						aspectRatio: e
					},
					children: /* @__PURE__ */ p(h, {
						image: i.activeImage.file.dataUrl,
						crop: i.activeCropperState.crop,
						zoom: i.activeCropperState.zoom,
						aspect: e,
						onCropChange: i.setActiveCropperCrop,
						onZoomChange: i.setActiveCropperZoom,
						onCropComplete: (e, t) => i.setActiveCrop(t),
						zoomSpeed: .1,
						objectFit: "contain"
					}, y(i.activeImage, i.activeIndex))
				})
			] }),
			/* @__PURE__ */ p(n, {
				required: !0,
				disabled: !i.hasSelected || r,
				label: "Краткое описание изображения",
				placeholder: "",
				value: i.activeImage?.alt ?? "",
				onChange: i.setActiveAlt
			})
		]
	});
}
function w({ aspect: t = 16 / 9, disabled: n, renderActions: r, ...i }) {
	let a = b({
		...i,
		disabled: n
	}), o = {
		value: a.value,
		activeIndex: a.activeIndex,
		hasSelected: a.hasSelected,
		canApply: a.canApply,
		apply: a.apply
	}, s = i.onChange !== void 0 || i.onApply !== void 0;
	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(C, {
		aspect: t,
		disabled: n,
		state: a
	}), r ? r(o) : s && /* @__PURE__ */ p("div", { children: /* @__PURE__ */ p(e, {
		disabled: !a.canApply,
		tone: "success",
		onClick: a.apply,
		children: "Применить"
	}) })] });
}
function T({ aspect: t = 16 / 9, disabled: n, isOpen: o = !0, onClose: s = () => {}, title: c = "Загрузка нового изображения", ...l }) {
	let u = b({
		...l,
		disabled: n
	});
	return l.onChange !== void 0 || l.onApply !== void 0 ? /* @__PURE__ */ m(i, {
		isOpen: o,
		onClose: s,
		title: c,
		size: "xl",
		children: [/* @__PURE__ */ p(a, {
			scrollable: !0,
			children: /* @__PURE__ */ p(C, {
				aspect: t,
				disabled: n,
				state: u
			})
		}), /* @__PURE__ */ p(r, { children: /* @__PURE__ */ p(e, {
			disabled: !u.canApply,
			tone: "success",
			onClick: u.apply,
			children: "Применить"
		}) })]
	}) : /* @__PURE__ */ p(i, {
		isOpen: o,
		onClose: s,
		title: c,
		size: "xl",
		children: /* @__PURE__ */ p(a, {
			scrollable: !0,
			children: /* @__PURE__ */ p(C, {
				aspect: t,
				disabled: n,
				state: u
			})
		})
	});
}
//#endregion
//#region src/image/ui/ImageView.tsx
var E = [
	2880,
	1920,
	1280,
	640,
	320
], D = ["avif", "webp"];
function O(e) {
	return e === "jpg" || e === "jpeg" ? "image/jpeg" : `image/${e}`;
}
function k(e) {
	return e ? e.replace(/^\/+|\/+$/g, "") : "";
}
function A(e, t) {
	let n = k(e);
	return n ? `/${n}/${t}` : `/${t}`;
}
function j({ basePath: e, formats: t, variantWidths: n, hasSet: r }) {
	return r ? t.map((t) => ({
		srcSet: n.map((n) => `${e}@${n}.${t} ${n}w`).join(", "),
		type: O(t)
	})) : t.map((t) => ({
		srcSet: `${e}.${t}`,
		type: O(t)
	}));
}
function M({ image: e, src: t, path: n, alt: r, formats: i = D, fallbackFormat: a, variantWidths: o = E, hasSet: s, aspectRatio: c, ...l }) {
	let u = e?.filename ?? t;
	if (!u) return /* @__PURE__ */ p(v, {
		src: "",
		alt: r ?? e?.alt,
		...l
	});
	let d = e?.path ?? n, f = s ?? e?.hasSet ?? !0, m = i.length > 0 ? i : D, h = a ?? m[m.length - 1] ?? "webp", g = A(d, u), _ = c ?? (e?.width && e.height ? `${e.width} / ${e.height}` : void 0), y = j({
		basePath: g,
		formats: m,
		variantWidths: o,
		hasSet: f
	});
	return /* @__PURE__ */ p(v, {
		src: `${g}.${h}`,
		sources: y,
		alt: r ?? e?.alt,
		aspectRatio: _,
		...l
	});
}
//#endregion
export { g as ImageCropper, _ as ImagePlaceholder, v as ImageRenderer, T as ImageSelectionModal, w as ImageSelectionPanel, M as ImageView };

//# sourceMappingURL=index.js.map