import { business } from '@/services';
import { formLayout } from '@/utils/formLayout';
import {
	ProForm,
	ProFormColorPicker,
	ProFormText,
} from '@ant-design/pro-components';
import { Col, message, Row, Space } from 'antd';
import { useState } from 'react';

interface ICustomThemeConfigProps {
	onFinish: (
		customThemeConfigValue: BusinessAPI.CustomThemeConfigValue,
	) => void;
}
export default function CustomThemeConfig(props: ICustomThemeConfigProps) {
	const { onFinish } = props;

	const [customThemeConfigValue, setCustomThemeConfigValue] =
		useState<BusinessAPI.CustomThemeConfigValue>();

	return (
		<ProForm<BusinessAPI.CustomThemeConfigValue>
			{...formLayout()}
			request={async () => {
				const { data } = await business.setting.showSetting({
					settingShowQry: {
						settingKey: 'CUSTOM_THEME_CONFIG',
					},
				});

				const customThemeConfigValue =
					data?.settingValue as BusinessAPI.CustomThemeConfigValue;

				setCustomThemeConfigValue(customThemeConfigValue);
				return customThemeConfigValue;
			}}
			onValuesChange={(_, values) => {
				onFinish({
					...customThemeConfigValue,
					...values,
				});
			}}
			onFinish={async (values) => {
				await business.setting.updateSetting({
					settingKey: 'CUSTOM_THEME_CONFIG',
					settingValue: {
						...values,
						settingKey: 'CUSTOM_THEME_CONFIG',
					},
				});

				message.success('更新主题色配置成功');
			}}
			submitter={{
				render: (_, dom) => {
					return (
						<Row>
							<Col span={14} offset={4}>
								<Space>{dom}</Space>
							</Col>
						</Row>
					);
				},
			}}
		>
			<ProFormText hidden={true} name={'settingId'} />
			<ProFormText
				label={'主题名称'}
				name={'themeName'}
				allowClear={true}
				rules={[
					{
						required: true,
						message: '请填写主题名称',
					},
				]}
				required={true}
			/>
			<ProFormColorPicker
				label={'主题颜色'}
				name={'primaryColor'}
				allowClear
				showText={true}
				rules={[
					{
						required: true,
						message: '请填写主题颜色',
					},
				]}
				convertValue={(value: any) => {
					if (typeof value === 'string') {
						return `rgb(${value})`;
					}
					return value;
				}}
				transform={(value: any) => {
					const metaColor = value?.metaColor;
					if (!metaColor) {
						return {
							primaryColor: value,
						};
					}
					return {
						primaryColor: `${metaColor.r} ${metaColor.g} ${metaColor.b}`,
					};
				}}
				required={true}
			/>
			<ProFormColorPicker
				label={'次要颜色'}
				name={'secondaryColor'}
				allowClear
				showText={true}
				rules={[
					{
						required: true,
						message: '请填写次要颜色',
					},
				]}
				convertValue={(value: any) => {
					if (typeof value === 'string') {
						return `rgb(${value})`;
					}
					return value;
				}}
				transform={(value: any) => {
					const metaColor = value?.metaColor;
					if (!metaColor) {
						return {
							secondaryColor: value,
						};
					}
					return {
						secondaryColor: `${metaColor.r} ${metaColor.g} ${metaColor.b}`,
					};
				}}
				required={true}
			/>
		</ProForm>
	);
}
