import useEngineContext from "../../../hooks/useEngineContext.js";
import MembersField from "./components/membersField/index.js";
import { getTimezoneList } from "./serve.js";
import React, { useMemo } from "react";
import { Form, Select } from "antd";
import { locales } from "@pisell/utils";
import { BaseTranslation, Icon } from "@pisell/materials";
import { useRequest } from "ahooks";
//#region src/plus/saasAttendance/settings/BasicInfoTab.tsx
const BasicInfoTab = (props) => {
	var _engineContext$appHel;
	const engineContext = useEngineContext();
	const { translation } = (engineContext === null || engineContext === void 0 || (_engineContext$appHel = engineContext.appHelper) === null || _engineContext$appHel === void 0 ? void 0 : _engineContext$appHel.utils) || {};
	const { data } = useRequest(getTimezoneList, { defaultParams: [{ pageSize: 499 }] });
	const timeZoneOptions = useMemo(() => {
		var _data$data;
		return (data === null || data === void 0 || (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.map((item) => ({
			label: translation(item.name),
			value: item.code
		}))) || [];
	}, [data]);
	return /* @__PURE__ */ React.createElement("div", {
		className: "saas-attendance-group-settings__panel",
		id: props.id
	}, /* @__PURE__ */ React.createElement(Form.Item, {
		label: locales.getText("pisell2.attendance.group-settings.basic-info.label.name"),
		name: "name",
		rules: [{ required: true }, { validator(_, value) {
			let hasVal = false;
			if (value && typeof value === "object") Object.entries(value).forEach(([key, val]) => {
				if (val) hasVal = true;
			});
			if (!hasVal) return Promise.reject(locales.getText("pisell2.attendance.group-settings.basic-info.name-required"));
			return Promise.resolve();
		} }],
		extra: locales.getText("pisell2.attendance.group-settings.basic-info.name-max-length")(50)
	}, /* @__PURE__ */ React.createElement(BaseTranslation, {
		maxLength: 50,
		placeholder: locales.getText("pisell2.attendance.group-settings.basic-info.name-tip")
	})), /* @__PURE__ */ React.createElement(Form.Item, {
		label: locales.getText("pisell2.attendance.group-settings.basic-info.label.time-zone"),
		name: "timezone",
		rules: [{ required: true }],
		required: true,
		extra: /* @__PURE__ */ React.createElement("div", { style: { color: "#ea580c" } }, /* @__PURE__ */ React.createElement(Icon, {
			type: "pisell2-alert-triangle",
			size: 14,
			style: { marginRight: 4 }
		}), locales.getText("pisell2.attendance.group-settings.basic-info.time-zone-tip"))
	}, /* @__PURE__ */ React.createElement(Select, {
		disabled: true,
		options: timeZoneOptions
	})), /* @__PURE__ */ React.createElement(Form.Item, {
		label: locales.getText("pisell2.attendance.group-settings.basic-info.label.members"),
		name: "member_ids",
		rules: [{ required: true }]
	}, /* @__PURE__ */ React.createElement(MembersField, null)));
};
//#endregion
export { BasicInfoTab as default };
