import { Input } from 'antd-mobile'
import BasicField from '../Basic'
import { KMPopupSelect } from '@/components/ui'
import { useListLogisticsWithInterceptInfoQuery } from '@/services/flow'
import { showError } from '@/utils'
import { FormControl } from '../../form'
import type {
  IExpressLogisticsSelectProps,
  ExpressLogisticsSelectVaueType,
  TriggerEventPartFCType,
  FiledRenderPropsType
} from '@/types'
import type { PickerValue } from 'antd-mobile/es/components/picker-view'

class ExpressLogisticsSelect extends BasicField {
  props: IExpressLogisticsSelectProps
  isComposite = true
  constructor(props: IExpressLogisticsSelectProps, form: FormControl) {
    super(props, form)
    this.props = props
    this.rules = this.getRules(props.componentConfig)
  }
  getRules(config: IExpressLogisticsSelectProps['componentConfig']) {
    const rules = []
    if (config.required) {
      rules.push({
        required: true,
        validator: (_: any, value: ExpressLogisticsSelectVaueType) => {
          if (!value.company) {
            return Promise.reject(new Error(`请选择物流公司`))
          } else if (!value.order) {
            return Promise.reject(new Error(`请选择物流单号`))
          }
          return Promise.resolve()
        }
      })
    }
    return rules
  }
  render({ triggerEvent }: FiledRenderPropsType) {
    const { isSingle, showField, replaceWarn } = this.props.componentConfig
    const showCompany = !isSingle || showField === 'EXPRESS_COMPANY'
    const showCode = !isSingle || showField === 'EXPRESS_WAYBILL_CODE'
    const handleTriggerEventPartFC: TriggerEventPartFCType = (
      type,
      { value }
    ) => {
      const needReplaceWarn = type === 'REPEAT_CHECK' && replaceWarn
      needReplaceWarn &&
        triggerEvent?.({
          type,
          value,
          componentName: `expressLogisticsCode`,
          fieldData: this.props
        })
    }
    return (
      <FormElement
        showCompany={showCompany}
        showCode={showCode}
        triggerEventPartFC={handleTriggerEventPartFC}
      />
    )
  }
}

const FormElement = ({
  showCompany,
  showCode,
  onChange,
  triggerEventPartFC,
  value = { order: '', company: '' }
}: {
  showCompany: boolean
  showCode: boolean
  onChange?: (value: ExpressLogisticsSelectVaueType) => void
  triggerEventPartFC?: TriggerEventPartFCType
  value?: { order: string; company: string }
}) => {
  const { data, error } = useListLogisticsWithInterceptInfoQuery(118)
  const triggerValue = (
    changedValue: Partial<ExpressLogisticsSelectVaueType>
  ) => {
    onChange?.({ ...value, ...changedValue })
  }

  const onOrderChange = (value: string) => {
    triggerValue({ order: value })
  }

  const onOrderBlur = () => {
    triggerEventPartFC?.('REPEAT_CHECK', { value: value.order })
  }

  const onCompanyChange = (value: PickerValue) => {
    triggerValue({ company: value as string })
  }
  const expressList = (data || []).map(item => ({
    label: item.name,
    value: item.cpCode
  }))
  if (error) showError(error)

  return (
    <>
      {showCompany && (
        <div className="field-child">
          <KMPopupSelect
            title="请选择物流"
            options={expressList}
            onChange={onCompanyChange}
            value={value.company}
          ></KMPopupSelect>
        </div>
      )}
      {showCode && (
        <div className="field-child">
          <Input
            value={value.order}
            onChange={onOrderChange}
            onBlur={onOrderBlur}
            placeholder={`请输入物流单号`}
          />
        </div>
      )}
    </>
  )
}

export default ExpressLogisticsSelect