import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../../../../hooks/useEngineContext.js";
import locales_default from "./locales.js";
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
import { Button, Form, Input } from "antd";
import { locales } from "@pisell/utils";
import { BaseTranslation, FormItemUpload } from "@pisell/materials";
import classNames from "classnames";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import "./PageSettingItem.less";
//#region src/components/authentication/admin/ChannelAuthSetting/PageSettingItem/index.tsx
const PageSettingItem = forwardRef(({ className, style, value, onChange, showImageUpload = true }, ref) => {
	var _context$engine, _appHelper$constants, _appHelper$constants2;
	const context = useEngineContext();
	const appHelper = context === null || context === void 0 ? void 0 : context.appHelper;
	locales.init(locales_default, (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en");
	const [form] = Form.useForm();
	useImperativeHandle(ref, () => ({ validateFields: () => form.validateFields() }));
	const previousValueRef = useRef(value);
	useEffect(() => {
		const prevValue = previousValueRef.current;
		if ((value === null || value === void 0 ? void 0 : value.backgroundImage) !== (prevValue === null || prevValue === void 0 ? void 0 : prevValue.backgroundImage) || JSON.stringify(value === null || value === void 0 ? void 0 : value.termsConditions) !== JSON.stringify(prevValue === null || prevValue === void 0 ? void 0 : prevValue.termsConditions)) {
			form.setFieldsValue({
				backgroundImage: (value === null || value === void 0 ? void 0 : value.backgroundImage) || "",
				termsConditions: (value === null || value === void 0 ? void 0 : value.termsConditions) || [{
					name: {
						en: "Terms of Service",
						"zh-CN": "服务条款",
						"zh-HK": "服務條款",
						original: "Terms of Service",
						ja: "利用規約",
						pt: "Termos de Serviço"
					},
					url: "https://example.com/terms"
				}, {
					name: {
						en: "Privacy Policy",
						"zh-CN": "隐私政策",
						"zh-HK": "隱私政策",
						original: "Privacy Policy",
						ja: "プライバシーポリシー",
						pt: "Política de Privacidade"
					},
					url: "https://example.com/privacy"
				}]
			});
			previousValueRef.current = value;
		}
	}, [value, form]);
	const handleFormChange = () => {
		const formValues = form.getFieldsValue();
		const newValue = {
			backgroundImage: formValues.backgroundImage || "",
			termsConditions: formValues.termsConditions || []
		};
		onChange === null || onChange === void 0 || onChange(newValue);
	};
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("page-setting-item", className),
		style
	}, /* @__PURE__ */ React.createElement(Form, {
		form,
		onValuesChange: handleFormChange
	}, showImageUpload && /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-section page-setting-item-background" }, /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-section-title" }, locales.getText("page.setting.item.background.title")), /* @__PURE__ */ React.createElement(Form.Item, {
		name: "backgroundImage",
		style: { margin: 0 }
	}, /* @__PURE__ */ React.createElement(FormItemUpload, {
		renderMode: "edit",
		mediaUploadUrl: appHelper === null || appHelper === void 0 || (_appHelper$constants = appHelper.constants) === null || _appHelper$constants === void 0 ? void 0 : _appHelper$constants.mediaUploadUrl,
		getHeaders: appHelper === null || appHelper === void 0 || (_appHelper$constants2 = appHelper.constants) === null || _appHelper$constants2 === void 0 ? void 0 : _appHelper$constants2.getHeaders,
		maxCount: 1,
		multiple: false,
		enableCustomType: true,
		customType: [
			".png",
			".jpg",
			".jpeg"
		],
		allowPreview: true
	}))), /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-section page-setting-item-terms" }, /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-section-header" }, /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-section-title" }, locales.getText("page.setting.item.terms.title")), /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-section-subtitle" }, locales.getText("page.setting.item.terms.subtitle"))), /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-terms-table" }, /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-terms-table-header" }, /* @__PURE__ */ React.createElement("div", null, locales.getText("page.setting.item.terms.table.name")), /* @__PURE__ */ React.createElement("div", null, locales.getText("page.setting.item.terms.table.url")), /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, locales.getText("page.setting.item.terms.table.action"))), /* @__PURE__ */ React.createElement(Form.List, { name: "termsConditions" }, (fields, { add, remove }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-terms-table-body" }, fields.map((field) => /* @__PURE__ */ React.createElement("div", {
		key: field.key,
		className: "page-setting-item-terms-table-row"
	}, /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-terms-table-cell" }, /* @__PURE__ */ React.createElement(Form.Item, _objectSpread2(_objectSpread2({}, field), {}, {
		name: [field.name, "name"],
		validateTrigger: ["onChange", "onBlur"],
		rules: [{ validator: (_, value) => {
			if (!value || !value.original || !value.original.trim()) return Promise.reject(new Error(locales.getText("page.setting.item.terms.error.name.required")));
			return Promise.resolve();
		} }],
		style: {
			margin: 0,
			flex: 1
		}
	}), /* @__PURE__ */ React.createElement(BaseTranslation, {
		renderMode: "edit",
		placeholder: locales.getText("page.setting.item.terms.table.name.placeholder")
	}))), /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-terms-table-cell" }, /* @__PURE__ */ React.createElement(Form.Item, _objectSpread2(_objectSpread2({}, field), {}, {
		name: [field.name, "url"],
		validateTrigger: ["onChange", "onBlur"],
		rules: [{ validator: (_, value) => {
			if (!value || !value.trim()) return Promise.reject(new Error(locales.getText("page.setting.item.terms.error.url.required")));
			return Promise.resolve();
		} }, {
			type: "url",
			message: locales.getText("page.setting.item.terms.error.url.invalid")
		}],
		style: {
			margin: 0,
			flex: 1
		}
	}), /* @__PURE__ */ React.createElement(Input, { placeholder: locales.getText("page.setting.item.terms.table.url.placeholder") }))), /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-terms-table-actions" }, /* @__PURE__ */ React.createElement(Button, {
		type: "text",
		danger: true,
		icon: /* @__PURE__ */ React.createElement(DeleteOutlined, null),
		size: "small",
		onClick: () => remove(field.name)
	}))))), /* @__PURE__ */ React.createElement("div", { className: "page-setting-item-terms-add-row" }, /* @__PURE__ */ React.createElement(Button, {
		type: "default",
		icon: /* @__PURE__ */ React.createElement(PlusOutlined, null),
		onClick: () => add({
			name: {
				en: "",
				"zh-CN": "",
				"zh-HK": "",
				ja: "",
				pt: "",
				original: ""
			},
			url: ""
		}),
		className: "page-setting-item-terms-add-button"
	}, locales.getText("page.setting.item.terms.button.add")))))))));
});
PageSettingItem.displayName = "PageSettingItem";
//#endregion
export { PageSettingItem as default };
