import { FC, useState, useRef } from 'react'
import { Input } from 'antd-mobile'
import ParseLogistics from '../ParseLogistics'
import {
  BasicIdentifyAddressFieldValueType,
  IBasicIdentifyAddressConfig,
  AddressItemType
} from '@/types'
import AddressField from '../Address'
import { getCodeByName } from '@/utils'

interface IdentifyAddressFieldProps extends IBasicIdentifyAddressConfig {
  value?: BasicIdentifyAddressFieldValueType
  onChange?: (data: any) => void
}

interface ParseLogisticsValueType {
  addressDetail: string
  name: string
  phone: string
  province: string
  city: string
  district: string
}
interface AddressPropsType extends React.ComponentProps<typeof AddressField> {
  getData: () => AddressItemType[]
}

const IdentifyAddressField: FC<IdentifyAddressFieldProps> = props => {
  const { value, showIdentify = true, disabled = false, onChange } = props
  const [identifyValue, setIdentifyValue] = useState(value)
  const addressRef = useRef<AddressPropsType>(null)
  const handleAddress = (type: string, val: string | object) => {
    onChange?.({
      ...identifyValue,
      [type]: val
    })
    setIdentifyValue({
      ...identifyValue,
      [type]: val
    } as BasicIdentifyAddressFieldValueType)
  }
  const handleParseLogistics = (data: ParseLogisticsValueType) => {
    let addrData = [] as AddressItemType[]
    if (addressRef.current) {
      addrData = addressRef.current?.getData()
    }
    const params = {
      detail: data?.addressDetail || '',
      receiverName: data?.name || '',
      receiverMobile: data?.phone || '',
      address: [
        getCodeByName(data?.province, addrData),
        getCodeByName(data?.city, addrData),
        getCodeByName(data?.district, addrData)
      ]
    }
    setIdentifyValue({ ...identifyValue, ...params })
    onChange?.({
      ...identifyValue,
      ...params
    })
  }
  return (
    <>
      <div className="field-child">
        <Input
          value={identifyValue?.receiverName}
          placeholder="请输入收件人姓名"
          disabled={disabled}
          onChange={val => handleAddress('receiverName', val)}
        ></Input>
      </div>
      <div className="field-child">
        <Input
          value={identifyValue?.receiverMobile}
          placeholder="请输入收件人电话"
          disabled={disabled}
          onChange={val => handleAddress('receiverMobile', val)}
        ></Input>
      </div>
      <div className="field-child">
        <AddressField
          ref={addressRef}
          value={identifyValue?.address}
          onChange={val => handleAddress('address', val)}
        ></AddressField>
      </div>
      <div className="field-child">
        <Input
          value={identifyValue?.detail}
          onChange={val => handleAddress('detail', val)}
          placeholder={`请输入详细地址`}
        />
      </div>
      {!disabled && showIdentify && (
        <div className="field-child">
          <ParseLogistics onChange={handleParseLogistics}></ParseLogistics>
        </div>
      )}
    </>
  )
}

export default IdentifyAddressField