const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_utils = require("@pisell/utils");
let _pisell_materials = require("@pisell/materials");
let _ant_design_icons = require("@ant-design/icons");
require("./index.less");
//#region src/plus/saasAttendance/settings/components/membersField/index.tsx
const AntTag = antd.Tag;
const MemberSelector = ({ dataSource, value, onConfirm, open, onClose, showSearch = false, onSearch, searchText = "" }) => {
	const [internalSelected, setInternalSelected] = (0, react.useState)([]);
	(0, react.useEffect)(() => {
		if (open) setInternalSelected(value || []);
	}, [open, value]);
	const handleToggle = (val) => {
		setInternalSelected((prev) => {
			if (prev.includes(val)) return prev.filter((v) => v !== val);
			return [...prev, val];
		});
	};
	const handleConfirm = () => {
		onConfirm(internalSelected);
		onClose();
	};
	return /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal, {
		open,
		onCancel: onClose,
		title: _pisell_utils.locales.getText("pisell2.attendance.group-settings.basic-info.members-drawer.title"),
		width: 640,
		footer: /* @__PURE__ */ react.default.createElement("div", { className: "pisell-member-selector-footer" }, /* @__PURE__ */ react.default.createElement(antd.Button, {
			type: "primary",
			onClick: handleConfirm,
			block: true
		}, _pisell_utils.locales.getText("pisell2.attendance.group-settings.actions.confirm"))),
		bodyStyle: { padding: 20 }
	}, showSearch && /* @__PURE__ */ react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ react.default.createElement(antd.Input, {
		placeholder: _pisell_utils.locales.getText("pisell2.attendance.group-settings.actions.search"),
		prefix: /* @__PURE__ */ react.default.createElement(_ant_design_icons.SearchOutlined, null),
		value: searchText,
		onChange: (e) => {
			onSearch === null || onSearch === void 0 || onSearch(e.target.value);
		},
		allowClear: true
	})), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-member-selector-list" }, dataSource.length === 0 ? /* @__PURE__ */ react.default.createElement("div", { style: { gridColumn: "1/-1" } }, /* @__PURE__ */ react.default.createElement(antd.Empty, null)) : dataSource.map((item) => {
		var _item$label;
		const isSelected = internalSelected.includes(item.value);
		return /* @__PURE__ */ react.default.createElement("div", {
			key: item.value,
			className: `pisell-member-selector-item ${isSelected ? "pisell-member-selector-item-selected" : ""}`,
			onClick: () => handleToggle(item.value)
		}, /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellCard, { padding: 0 }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-member-selector-item-content" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellAvatar, {
			src: item.avatar,
			size: "xxl",
			className: "pisell-member-selector-item-avatar"
		}, (_item$label = item.label) === null || _item$label === void 0 || (_item$label = _item$label[0]) === null || _item$label === void 0 ? void 0 : _item$label.toUpperCase()), /* @__PURE__ */ react.default.createElement("div", {
			className: "pisell-member-selector-item-name",
			title: item.label
		}, item.label), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-member-selector-item-check" }, /* @__PURE__ */ react.default.createElement(_ant_design_icons.CheckCircleFilled, null)))));
	})));
};
const MembersField = (props) => {
	var _props$value;
	const { members } = (0, react.useContext)(require_index.settingsContext);
	const value = (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : [];
	const [isShowSelector, setIsShowSelector] = (0, react.useState)(false);
	const [searchText, setSearchText] = (0, react.useState)("");
	const memberById = (0, react.useMemo)(() => {
		if (!Array.isArray(members)) return {};
		return members.reduce((prev, cur) => {
			prev[cur.id] = cur;
			return prev;
		}, {});
	}, [members]);
	const memberOpts = (0, react.useMemo)(() => {
		let list = [];
		if (Array.isArray(members)) list = members;
		if (searchText) list = list.filter((item) => {
			var _item$nickname;
			return (_item$nickname = item.nickname) === null || _item$nickname === void 0 ? void 0 : _item$nickname.toLowerCase().includes(searchText.toLowerCase());
		});
		return list.map((item) => {
			var _item$account;
			return {
				label: item.nickname,
				value: item.id,
				avatar: (_item$account = item.account) === null || _item$account === void 0 ? void 0 : _item$account.avatar
			};
		});
	}, [members, searchText]);
	const onAddMember = () => {
		setIsShowSelector(true);
	};
	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", {
		id: props.id,
		style: {
			background: "#f9fafb",
			border: "1px solid #d1d5db",
			borderRadius: 8,
			padding: 12
		}
	}, /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__members-box" }, /* @__PURE__ */ react.default.createElement("div", { className: "saas-attendance-group-settings__members-count" }, _pisell_utils.locales.getText("pisell2.attendance.group-settings.basic-info.members-count")(value.length)), /* @__PURE__ */ react.default.createElement(antd.Button, {
		type: "link",
		className: "saas-attendance-group-settings__link",
		onClick: onAddMember
	}, /* @__PURE__ */ react.default.createElement(_ant_design_icons.PlusOutlined, null), _pisell_utils.locales.getText("pisell2.attendance.group-settings.basic-info.add-members"))), /* @__PURE__ */ react.default.createElement("div", { style: { marginTop: 8 } }, value.map((id) => {
		var _memberById$id;
		return /* @__PURE__ */ react.default.createElement(AntTag, {
			key: id,
			closable: true,
			onClose: (e) => {
				var _props$onChange;
				e.preventDefault();
				(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, value.filter((v) => v !== id));
			}
		}, ((_memberById$id = memberById[id]) === null || _memberById$id === void 0 ? void 0 : _memberById$id.nickname) || id);
	})), /* @__PURE__ */ react.default.createElement("div", {
		className: "saas-attendance-group-settings__tip",
		style: { marginTop: 8 }
	}, /* @__PURE__ */ react.default.createElement(_ant_design_icons.InfoCircleOutlined, null), /* @__PURE__ */ react.default.createElement("span", null, _pisell_utils.locales.getText("pisell2.attendance.group-settings.basic-info.members-tip")))), /* @__PURE__ */ react.default.createElement(MemberSelector, {
		value,
		dataSource: memberOpts,
		open: isShowSelector,
		showSearch: true,
		searchText,
		onSearch: setSearchText,
		onConfirm: (values) => {
			if (values) {
				var _props$onChange2;
				(_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, values);
			} else {
				var _props$onChange3;
				(_props$onChange3 = props.onChange) === null || _props$onChange3 === void 0 || _props$onChange3.call(props, []);
			}
		},
		onClose: () => {
			setIsShowSelector(false);
			setSearchText("");
		}
	}));
};
//#endregion
exports.default = MembersField;
