import { Input } from 'antd-mobile'
import { SubFieldLabel } from '../common'
import BasicField from '../Basic'
import { FormControl } from '../../form'
import type {
  IAliPayInputProps,
  AliPayInputValueType,
  FiledRenderPropsType,
  TriggerEventPartFCType,
  FieldValueChangeType
} from '@/types'

class AliPayInput extends BasicField {
  props: IAliPayInputProps
  isComposite = true
  constructor(props: IAliPayInputProps, form: FormControl) {
    super(props, form)
    this.props = props
    this.rules = this.getRules(props.componentConfig)
  }
  getRules(config: IAliPayInputProps['componentConfig']) {
    const rules = []
    if (config.required) {
      rules.push({
        required: true,
        validator: (_: any, value: AliPayInputValueType) => {
          if (!value.name) {
            return Promise.reject(new Error(`请输入支付宝名称`))
          } else if (!value?.user) {
            return Promise.reject(new Error(`请输入支付宝账号`))
          }
          return Promise.resolve()
        }
      })
    }
    return rules
  }
  render({
    triggerEvent,
    isSubField = false,
    key,
    value,
    onChange
  }: FiledRenderPropsType<
    AliPayInputValueType,
    FieldValueChangeType<Partial<AliPayInputValueType>>
  >) {
    const { isSingle, replaceWarn, required } = this.props.componentConfig
    const handleTriggerEventPartFC: TriggerEventPartFCType = (
      type,
      { value }
    ) => {
      const needReplaceWarn = type === 'REPEAT_CHECK' && replaceWarn
      needReplaceWarn &&
        triggerEvent?.({
          type,
          value,
          componentName: `alipayAccount`,
          fieldData: this.props
        })
    }
    return (
      <FormElement
        key={key}
        value={value}
        onChange={onChange}
        required={required}
        isSubField={isSubField}
        isSingle={isSingle}
        triggerEventPartFC={handleTriggerEventPartFC}
      />
    )
  }
}

const FormElement = ({
  isSubField = false,
  required = false,
  isSingle,
  triggerEventPartFC,
  onChange,
  value = { user: '', name: '' }
}: {
  isSubField: boolean
  required: boolean
  isSingle: boolean
  triggerEventPartFC?: TriggerEventPartFCType
  onChange?: (value: Partial<AliPayInputValueType>) => void
  value?: AliPayInputValueType
}) => {
  const triggerValue = (changedValue: Partial<AliPayInputValueType>) => {
    onChange?.(isSubField ? changedValue : { ...value, ...changedValue })
  }

  const onUserChange = (user: string) => {
    triggerValue({ user })
  }

  const onUserBlur = () => {
    triggerEventPartFC?.('REPEAT_CHECK', { value: value.user })
  }

  const onNameChange = (name: string) => {
    triggerValue({ name })
  }

  return (
    <>
      {!isSingle && (
        <>
          {isSubField && (
            <SubFieldLabel required={required} label="支付宝名称" />
          )}
          <div className="field-child">
            <Input
              value={value.name}
              onChange={onNameChange}
              placeholder={`请输入支付宝名称`}
            />
          </div>
        </>
      )}
      <>
        {isSubField && <SubFieldLabel required={required} label="支付宝账号" />}
        <div className="field-child">
          <Input
            value={value.user}
            onChange={onUserChange}
            onBlur={onUserBlur}
            placeholder={`请输入支付宝账号`}
          />
        </div>
      </>
    </>
  )
}

export default AliPayInput