import BasicField from '../Basic'
import AddressField from '@/components/ui/Address'
import type { IReceiverAddressInputProps } from '@/types'
import { FormControl } from '../../form'
import { Input } from 'antd-mobile'
import { ReceiverAddressInputValueType, BasicAddressValueType } from '@/types'
class ReceiverAddressInput extends BasicField {
  isComposite = true
  props: IReceiverAddressInputProps
  visible = false
  constructor(props: IReceiverAddressInputProps, form: FormControl) {
    super(props, form)
    this.props = props
    this.rules = this.getRules(props.componentConfig)
  }
  getRules(config: IReceiverAddressInputProps['componentConfig']) {
    const rules = []
    if (config.required) {
      rules.push({
        required: true,
        validator: (_: any, value: ReceiverAddressInputValueType) => {
          if (value?.address?.length > 0 && value.detail) {
            return Promise.resolve()
          }
          return Promise.reject(new Error(`请选择${this.name}`))
        }
      })
    }
    return rules
  }
  render() {
    return <FormElement />
  }
}
const FormElement = ({
  onChange,
  value = { address: [], detail: '' }
}: {
  onChange?: (value: ReceiverAddressInputValueType) => void
  value?: ReceiverAddressInputValueType
}) => {
  const triggerAddresValue = (changedValue: BasicAddressValueType) => {
    onChange?.({ ...value, address: changedValue })
  }
  const onDetailChange = (detail: string) => {
    onChange?.({ ...value, detail })
  }
  return (
    <>
      <div className="field-child">
        <AddressField
          value={value.address}
          onChange={val => triggerAddresValue(val)}
        ></AddressField>
      </div>
      <div className="field-child">
        <Input
          value={value.detail}
          onChange={onDetailChange}
          placeholder={`请输入详细地址`}
        />
      </div>
    </>
  )
}

export default ReceiverAddressInput