/*
 * @Author: yehuozhili
 * @Date: 2021-07-07 14:35:38
 * @LastEditors: guoshujing gsj2501015228@163.com
 * @LastEditTime: 2023-05-04 12:44:08
 * @FilePath: \dooringx\packages\dooringx-example\src\plugin\registComponents\button.tsx
 */

import { Button, Row, Col } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import {
	changeUserValue,
	ComponentItemFactory,
	createPannelOptions,
	useDynamicAddEventCenter,
	useRegistFunc,
} from 'dooringx-lib';
import { FormMap } from '../formTypes';
import { ComponentRenderConfigProps } from 'dooringx-lib/dist/core/components/componentItem';

function TextTemp(pr: ComponentRenderConfigProps) {
	const props = pr.data.props;
	console.log('文本组件', pr);
	const data = pr.data;
	const eventCenter = useMemo(() => {
		return pr.config.getEventCenter(); //获取事件中心类
	}, [pr.config]);

	useDynamicAddEventCenter(pr, `${pr.data.id}-init`, '初始渲染时机'); //注册名必须带id 约定！
	useDynamicAddEventCenter(pr, `${pr.data.id}-click`, '点击执行时机');
	useEffect(() => {
		// 模拟抛出事件
		if (pr.context === 'preview') {
			eventCenter.runEventQueue(`${pr.data.id}-init`, pr.config);
		}
	}, [eventCenter, pr.config, pr.context, pr.data.id]);

	const [text, setText] = useState(props?.text);
	const op1 = props.op1;

	const fn = useMemo(() => {
		const functionCenter = eventCenter.getFunctionCenter();
		return functionCenter.register({
			id: `${pr.data.id}+changeText`,
			fn: async (ctx, next, config, args: any, _eventList, iname) => {
				const userSelect = iname.data;
				const ctxVal = changeUserValue(
					userSelect['改变文本数据源'],
					args,
					'_changeval',
					config,
					ctx
				);
				const text = ctxVal[0];
				setText(text);
				next();
			},
			config: [
				{
					name: '改变文本数据源',
					data: ['ctx', 'input', 'dataSource'],
					options: {
						receive: '_changeval',
						multi: false,
					},
				},
			],
			name: `${pr.data.id}+改变文本函数`,
			componentId: pr.data.id,
		});
	}, []);

	useRegistFunc(op1, pr.context, fn);

	return (
		<Row
			style={{
				backgroundColor: props?.backgroundColor,
				display: 'inline-block',
				zIndex: data.zIndex,
				width: data.width,
				height: data.height,
				overflow: 'hidden',
				padding: props?.padding,
				borderRadius: props?.borderRadius,
			}}
		>
			<Col
				span={24}
				style={{
					lineHeight: Number(props?.lineHeight),
					fontSize: Number(props?.fontSize),
					color: props?.color,
					textAlign: props?.align,
					textAlignLast: props?.align,
					fontFamily: props?.fontFamily,
					fontWeight: Number(props?.fontWeight),
					textDecoration: props?.textDecoration,
				}}
			>
				{props?.text}
			</Col>
		</Row>
	);
}

const MText = new ComponentItemFactory(
	'text',
	'文本',
	{
		style: [
			createPannelOptions<FormMap, 'input'>('input', {
				receive: 'text',
				label: '文字',
			}),
			createPannelOptions<FormMap, 'colorSelect'>('colorSelect', {
				receive: 'color',
				label: '文字颜色',
				initValue: '#000000',
			}),
			createPannelOptions<FormMap, 'colorSelect'>('colorSelect', {
				receive: 'backgroundColor',
				label: '背景颜色',
				initValue: '#000000',
			}),
			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
				receive: 'fontSize',
				label: '文本大小',
			}),
			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
				receive: 'lineHeight',
				label: '行高',
			}),
			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
				receive: 'fontWeight',
				label: '文字粗细',
			}),
			createPannelOptions<FormMap, 'select'>('select', {
				receive: 'align',
				label: '对齐方式',
				initValue: 'left',
				options: [
					{
						value: 'left',
						label: '左对齐',
					},
					{
						value: 'center',
						label: '居中对齐',
					},
					{
						value: 'right',
						label: '右对齐',
					},
					{
						value: 'justify',
						label: '两端对齐',
					},
				],
			}),
			createPannelOptions<FormMap, 'select'>('select', {
				receive: 'fontFamily',
				label: '字体',
				initValue: '黑体',
				options: [
					{
						value: '黑体',
						label: '黑体',
					},
					{
						value: '宋体',
						label: '宋体',
					},
					{
						value: '"Microsoft YaHei", 微软雅黑',
						label: '微软雅黑',
					},
					{
						value: 'Georgia',
						label: 'Georgia',
					},
				],
			}),
			createPannelOptions<FormMap, 'select'>('select', {
				receive: 'textDecoration',
				label: '文字样式',
				initValue: 'none',
				options: [
					{
						value: 'line-through',
						label: '删除线',
					},
					{
						value: 'underline',
						label: '下划线',
					},
					{
						value: 'overline',
						label: '上划线',
					},
					{
						value: 'none',
						label: '无',
					},
				],
			}),
			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
				receive: 'padding',
				label: '内容边距',
			}),
			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
				receive: 'borderRadius',
				label: '背景圆角',
			}),
		],
		fn: [
			createPannelOptions<FormMap, 'switch'>('switch', {
				receive: 'op1',
				label: '改变文本函数',
			}),
		],
		animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
		actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
	},
	{
		props: {
			text: '纯文本',
			sizeData: [100, 30],
			backgroundColor: '#f0f5ff',
			lineHeight: 1,
			fontSize: 14,
			color: '#000000',
			fontFamily: '黑体',
			borderRadius: '0',
			op1: false,
			align: 'center',
			fontWeight: '400',
			textDecoration: 'none',
			padding: '0',
			borderData: {
				borderWidth: 0,
				borderColor: 'rgba(0,0,0,1)',
				borderStyle: 'solid',
			},
			fontData: {
				fontSize: 14,
				textDecoration: 'none',
				fontStyle: 'normal',
				color: 'rgba(255,255,255,1)',
				fontWeight: 'normal',
			},
		},
		width: 200, // 绝对定位元素初始必须有宽高，否则适配会有问题。
		height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
		rotate: {
			canRotate: true,
			value: 0,
		},
		canDrag: true, // false就不能拖
	},
	(data, context, store, config) => {
		return <TextTemp data={data} store={store} context={context} config={config}></TextTemp>;
	},
	true
);

export default MText;
