import type { Codebook } from '@/api/api'

import i18n from '@/locales'
const { t } = i18n.global
import { useAppStore } from '@/stores/app'

import { FormItem, FormConfig } from '@/components/form-render/form-render-types'
import { Rule } from 'ant-design-vue/es/form'
import api from '@/api'

export const config: FormConfig = {
	layout: 'horizontal',
	colon: true,
	hideRequiredMark: false,
	labelAlign: 'right',
	scrollToFirstError: false,
	validateOnRuleChange: true,
	labelCol: {
		span: 4,
		offset: 0,
	},
}

export const formItems = (sexes: Codebook[]): FormItem[] => {
	return [
		{
			group: 'form',
			type: 'input',
			config: {
				autoLink: true,
				hasFeedback: false,
				label: t('pages.acl.user.form.add.filed.name'),
				name: 'name',
				required: true,
			},
			properties: {
				size: 'default',
				type: 'text',
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: t('pages.acl.user.form.add.placeholder.name'),
				maxlength: 20,
			},
			rules: [
				{
					validator: validate,
					trigger: ['blur', 'change'],
				},
			],
		},
		{
			type: 'radio',
			group: 'form',
			config: {
				autoLink: true,
				hasFeedback: false,
				label: t('pages.acl.user.form.add.filed.sex'),
				name: 'sex',
				required: true,
			},
			properties: {
				size: 'default',
				optionType: 'button',
				buttonStyle: 'solid',
				options: sexes.map((item) => {
					return { value: item.name, label: useAppStore().isCN ? item.description : item.name }
				}),
			},
			rules: [],
		},
		{
			group: 'form',
			type: 'input-password',
			config: {
				autoLink: true,
				hasFeedback: false,
				label: t('pages.acl.user.form.add.filed.password'),
				name: 'password',
				required: true,
			},
			properties: {
				size: 'default',
				visibilityToggle: true,
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: t('pages.acl.user.form.add.placeholder.password'),
			},
			rules: [
				{
					type: 'string',
					required: true,
					whitespace: true,
					trigger: ['blur', 'change'],
					pattern: new RegExp('^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$'),
					message: '8位数字字母组合',
				},
			],
		},
		{
			group: 'form',
			type: 'input',
			config: {
				autoLink: true,
				hasFeedback: false,
				label: t('pages.acl.user.form.add.filed.fullName'),
				name: 'fullName',
				required: true,
			},
			properties: {
				size: 'default',
				type: 'text',
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: t('pages.acl.user.form.add.placeholder.fullName'),
			},
			rules: [],
		},
		{
			group: 'form',
			type: 'input',
			config: {
				autoLink: true,
				hasFeedback: false,
				label: t('pages.acl.user.form.add.filed.mobile'),
				name: 'mobile',
			},
			properties: {
				size: 'default',
				type: 'tel',
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: t('pages.acl.user.form.add.placeholder.mobile'),
			},
			rules: [],
		},
		{
			group: 'form',
			type: 'input',
			config: {
				autoLink: true,
				hasFeedback: false,
				label: t('pages.acl.user.form.add.filed.email'),
				name: 'email',
				required: true,
			},
			properties: {
				size: 'default',
				type: 'email',
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: t('pages.acl.user.form.add.placeholder.email'),
			},
			rules: [],
		},
	]
}

const validate = async (_rule: Rule, value: string): Promise<void> => {
	const regex = /^[a-zA-Z0-9]{4,8}$/
	if (!regex.test(value)) {
		return Promise.reject('用户名只能是4-8位字母或数字')
	}
	return new Promise<void>((resolve, reject) => {
		api.aclApi.user.existName({ name: value }, (data) => {
			if (data) {
				reject('用户名已经存在')
			} else {
				resolve()
			}
		})
	})
}
