import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import React, { useMemo } from "react";
import classNames from "classnames";
import "./index.less";
//#region src/pro/Selector/components/Media/index.tsx
const clamp = (value, min, max) => {
	return Math.max(min, Math.min(value, max));
};
const stopPropagation = (e) => {
	e.stopPropagation();
};
const Media = ({ cover, label, extra, indicator, showIndicator = true, coverType = "auto", shape, size = "large", selected = false, disabled = false, onClick, styles, className, style }) => {
	const styleProps = {
		selected,
		disabled,
		shape,
		size
	};
	const fontSize = useMemo(() => {
		if (typeof size === "number") return clamp(size * .2, 12, 48);
	}, [size]);
	const coverStyle = useMemo(() => {
		const baseStyle = {};
		if (typeof size === "number") {
			baseStyle.width = size;
			baseStyle.height = size;
			baseStyle.fontSize = fontSize;
		}
		if (!(styles === null || styles === void 0 ? void 0 : styles.cover)) return baseStyle;
		const customStyle = typeof styles.cover === "function" ? styles.cover(styleProps) : styles.cover;
		return _objectSpread2(_objectSpread2({}, baseStyle), customStyle);
	}, [
		size,
		fontSize,
		styles === null || styles === void 0 ? void 0 : styles.cover,
		styleProps
	]);
	const containerStyle = useMemo(() => {
		if (!(styles === null || styles === void 0 ? void 0 : styles.container)) return style;
		return _objectSpread2(_objectSpread2({}, typeof styles.container === "function" ? styles.container(styleProps) : styles.container), style);
	}, [
		styles === null || styles === void 0 ? void 0 : styles.container,
		style,
		styleProps
	]);
	const labelStyle = useMemo(() => {
		const baseStyle = {};
		if (fontSize) baseStyle.fontSize = fontSize;
		if (!(styles === null || styles === void 0 ? void 0 : styles.label)) return baseStyle;
		const customStyle = typeof styles.label === "function" ? styles.label(styleProps) : styles.label;
		return _objectSpread2(_objectSpread2({}, baseStyle), customStyle);
	}, [
		fontSize,
		styles === null || styles === void 0 ? void 0 : styles.label,
		styleProps
	]);
	const extraStyle = useMemo(() => {
		if (!(styles === null || styles === void 0 ? void 0 : styles.extra)) return void 0;
		return typeof styles.extra === "function" ? styles.extra(styleProps) : styles.extra;
	}, [styles === null || styles === void 0 ? void 0 : styles.extra, styleProps]);
	const indicatorSize = useMemo(() => {
		if (typeof size === "number") return Math.round(size * .3);
		return size === "large" ? "middle" : "small";
	}, [size]);
	const indicatorStyle = useMemo(() => {
		if (!(styles === null || styles === void 0 ? void 0 : styles.indicator)) return void 0;
		return typeof styles.indicator === "function" ? styles.indicator(styleProps) : styles.indicator;
	}, [styles === null || styles === void 0 ? void 0 : styles.indicator, styleProps]);
	const getTextContent = () => {
		if (typeof label === "string" && label) return label[0].toUpperCase();
		return "";
	};
	const renderPlaceholderLogo = () => {
		return /* @__PURE__ */ React.createElement("svg", {
			className: "pisell-selector_media-placeholder",
			viewBox: "0 0 1024 1024",
			width: "60%",
			height: "60%"
		}, /* @__PURE__ */ React.createElement("path", {
			d: "M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 85.333334C323.477333 170.666667 170.666667 323.477333 170.666667 512s152.810667 341.333333 341.333333 341.333333 341.333333-152.810667 341.333333-341.333333S700.522667 170.666667 512 170.666667z m0 128a85.333333 85.333333 0 1 1 0 170.666666 85.333333 85.333333 0 0 1 0-170.666666z m0 256c94.293333 0 170.666667 76.373333 170.666667 170.666666a42.666667 42.666667 0 0 1-85.333334 0 85.333333 85.333333 0 0 0-170.666666 0 42.666667 42.666667 0 0 1-85.333334 0c0-94.293333 76.373333-170.666667 170.666667-170.666666z",
			fill: "currentColor"
		}));
	};
	const renderCover = () => {
		if (coverType === "image") {
			if (typeof cover === "string" && cover) return /* @__PURE__ */ React.createElement("img", {
				src: cover,
				alt: typeof label === "string" ? label : ""
			});
			if (React.isValidElement(cover)) return cover;
			return renderPlaceholderLogo();
		}
		if (coverType === "text") {
			const text = getTextContent();
			if (text) return /* @__PURE__ */ React.createElement("span", { className: "pisell-selector_media-text" }, text);
			return renderPlaceholderLogo();
		}
		if (typeof cover === "string" && cover) return /* @__PURE__ */ React.createElement("img", {
			src: cover,
			alt: typeof label === "string" ? label : ""
		});
		if (React.isValidElement(cover)) return cover;
		const text = getTextContent();
		if (text) return /* @__PURE__ */ React.createElement("span", { className: "pisell-selector_media-text" }, text);
		return renderPlaceholderLogo();
	};
	const renderIndicator = () => {
		if (!showIndicator || !indicator || !selected) return null;
		if (React.isValidElement(indicator)) {
			const clonedIndicator = React.cloneElement(indicator, {
				size: indicatorSize,
				variant: "filled"
			});
			return /* @__PURE__ */ React.createElement("div", {
				className: "pisell-selector_media-indicator-wrapper",
				style: indicatorStyle,
				onClick: stopPropagation
			}, clonedIndicator);
		}
		return /* @__PURE__ */ React.createElement("div", {
			className: "pisell-selector_media-indicator-wrapper",
			style: indicatorStyle,
			onClick: stopPropagation
		}, indicator);
	};
	const handleClick = (e) => {
		if (disabled) return;
		onClick === null || onClick === void 0 || onClick(e);
	};
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-selector_media-item", {
			[`pisell-selector_media-item-${size}`]: [
				"small",
				"middle",
				"large"
			].includes(size),
			"pisell-selector_media-item-disabled": disabled,
			"pisell-selector_media-item-selected": selected
		}, className),
		style: containerStyle,
		onClick: handleClick
	}, /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-selector_media-cover", `pisell-selector_media-cover-${shape}`),
		style: coverStyle
	}, renderCover(), renderIndicator()), label && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-selector_media-label",
		style: labelStyle
	}, label), extra && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-selector_media-extra",
		style: extraStyle,
		onClick: stopPropagation
	}, extra));
};
//#endregion
export { Media as default };
