import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import React, { useCallback, useMemo } from "react";
import { PisellText, SortableList } from "@pisell/materials";
import classNames from "classnames";
import { EyeInvisibleOutlined, EyeOutlined, HolderOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/plus/walletEditor/components/sortableWalletPassTypes/index.tsx
const { Editable } = PisellText;
const WALLET_PASS_TYPES = [
	"rechargeable",
	"point",
	"voucher",
	"discount"
];
const DEFAULT_WALLET_PASS_TYPES_CONFIG = [
	{
		type: "rechargeable",
		custom_title: {
			original: "Balance",
			en: "Balance",
			"zh-CN": "余额",
			"zh-HK": "餘額",
			"ja": "残高",
			"pt": "Saldo"
		}
	},
	{
		type: "point",
		custom_title: {
			original: "Points",
			en: "Points",
			"zh-CN": "积分",
			"zh-HK": "積分",
			"ja": "ポイント",
			"pt": "Pontos"
		}
	},
	{
		type: "voucher",
		custom_title: {
			original: "Voucher",
			en: "Voucher",
			"zh-CN": "代金券",
			"zh-HK": "代金券",
			"ja": "クーポン",
			"pt": "Cupom"
		}
	},
	{
		type: "discount",
		custom_title: {
			original: "Discount",
			en: "Discount",
			"zh-CN": "折扣券",
			"zh-HK": "折扣券",
			"ja": "割引カード",
			"pt": "Cartão de desconto"
		}
	}
];
const SortableWalletPassTypes = (props) => {
	const { value = [], onChange, disabled = false, className, style } = props;
	const dataSource = useMemo(() => {
		const result = [];
		const processedTypes = /* @__PURE__ */ new Set();
		value.forEach((item) => {
			if (WALLET_PASS_TYPES.includes(item.type) && !processedTypes.has(item.type)) {
				result.push(item);
				processedTypes.add(item.type);
			}
		});
		DEFAULT_WALLET_PASS_TYPES_CONFIG.forEach((defaultType) => {
			if (!processedTypes.has(defaultType.type)) result.push({
				type: defaultType.type,
				display: 0,
				custom_title: defaultType.custom_title
			});
		});
		return result;
	}, [value]);
	const handleSortChange = useCallback((newList) => {
		if (!onChange || disabled) return;
		onChange(newList);
	}, [onChange, disabled]);
	const handleToggleDisplay = useCallback((index) => {
		if (!onChange || disabled) return;
		const newList = [...dataSource];
		newList[index] = _objectSpread2(_objectSpread2({}, newList[index]), {}, { display: newList[index].display === 1 ? 0 : 1 });
		onChange(newList);
	}, [
		dataSource,
		onChange,
		disabled
	]);
	const handleTitleChange = useCallback((index, newTitle) => {
		if (!onChange || disabled) return;
		const newList = [...dataSource];
		newList[index] = _objectSpread2(_objectSpread2({}, newList[index]), {}, { custom_title: typeof newTitle === "string" ? {
			original: newTitle,
			en: newTitle
		} : newTitle });
		onChange(newList);
	}, [
		dataSource,
		onChange,
		disabled
	]);
	const getDisplayTitle = useCallback((item) => {
		const defaultType = DEFAULT_WALLET_PASS_TYPES_CONFIG.find((t) => t.type === item.type);
		return item.custom_title || (defaultType === null || defaultType === void 0 ? void 0 : defaultType.custom_title) || {
			original: item.type,
			en: item.type
		};
	}, []);
	const renderItem = useCallback((item, index) => {
		const displayTitle = getDisplayTitle(item);
		const isVisible = item.display === 1;
		return /* @__PURE__ */ React.createElement("div", { className: classNames("sortable-wallet-pass-item", {
			"sortable-wallet-pass-item-disabled": disabled,
			"sortable-wallet-pass-item-hidden": !isVisible
		}) }, /* @__PURE__ */ React.createElement("div", { className: "sortable-wallet-pass-drag-handle" }, /* @__PURE__ */ React.createElement(HolderOutlined, {
			className: "drag-dots",
			size: 20
		})), /* @__PURE__ */ React.createElement("div", { className: "sortable-wallet-pass-title" }, /* @__PURE__ */ React.createElement(Editable, {
			value: displayTitle,
			editable: !disabled && { maxLength: 10 },
			onChange: (newValue) => handleTitleChange(index, newValue)
		})), /* @__PURE__ */ React.createElement("div", { className: "sortable-wallet-pass-toggle" }, /* @__PURE__ */ React.createElement("button", {
			type: "button",
			style: {
				cursor: "pointer",
				border: "none",
				background: "transparent"
			},
			onClick: () => handleToggleDisplay(index)
		}, isVisible ? /* @__PURE__ */ React.createElement(EyeOutlined, { className: "eye-icon eye-icon-visible" }) : /* @__PURE__ */ React.createElement(EyeInvisibleOutlined, { className: "eye-icon eye-icon-hidden" }))));
	}, [
		disabled,
		getDisplayTitle,
		handleTitleChange,
		handleToggleDisplay
	]);
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("sortable-wallet-pass-types", className, { "sortable-wallet-pass-types-disabled": disabled }),
		style
	}, /* @__PURE__ */ React.createElement(SortableList, {
		dataSource,
		onChange: handleSortChange,
		rowKey: "type",
		renderItem,
		activationConstraint: { distance: 5 }
	}));
};
//#endregion
export { DEFAULT_WALLET_PASS_TYPES_CONFIG, SortableWalletPassTypes as default };
