import { SubFieldLabel } from '../common'
import SelectOrder from '../common/SelectOrder'
import BasicField from '../Basic'
import { FormControl } from '../../form'
import type {
  ITradeIdInputProps,
  FieldValueChangeType,
  FiledRenderPropsType,
  TriggerEventPartFCType
} from '@/types'

class TradeIdInput extends BasicField {
  props: ITradeIdInputProps
  constructor(props: ITradeIdInputProps, form: FormControl) {
    super(props, form)
    this.props = props
    this.rules = this.getRules(props.componentConfig)
    this.componentName = props.componentName || 'tradeId'
  }
  getRules(config: ITradeIdInputProps['componentConfig']) {
    const rules = []
    if (config.required) {
      rules.push({
        required: true,
        message: `请输入${this.name}`
      })
    }
    return rules
  }
  render(props: FiledRenderPropsType<string, FieldValueChangeType<string>>) {
    const {
      isSubField = false,
      key,
      value,
      triggerEvent,
      onChange,
      shopId,
      buyerOpenUid,
      buyerNick,
      companyKey
    } = props
    const { replaceWarn, required } = this.props.componentConfig
    const handleTriggerEventPartFC: TriggerEventPartFCType = (
      type,
      { value }
    ) => {
      const needReplaceWarn = type === 'REPEAT_CHECK' && replaceWarn
      needReplaceWarn &&
        triggerEvent?.({
          type,
          value,
          componentName: this.componentName,
          fieldData: this.props
        })
      if (type === 'ORDER_BACK_REPLACE') {
        triggerEvent?.({
          type,
          value,
          fieldData: this.props
        })
      }
    }
    return (
      <FormElement
        key={key}
        name={this.name}
        required={required}
        isSubField={isSubField}
        shopId={shopId}
        buyerOpenUid={buyerOpenUid}
        buyerNick={buyerNick}
        companyKey={companyKey}
        value={value}
        onChange={onChange}
        triggerEventPartFC={handleTriggerEventPartFC}
      />
    )
  }
}

const FormElement = ({
  name,
  required,
  isSubField,
  onChange,
  value = '',
  shopId,
  buyerOpenUid,
  buyerNick,
  companyKey,
  triggerEventPartFC
}: {
  name: string
  required: boolean
  isSubField: boolean
  onChange?: (value: string) => void
  value?: string
  shopId: string
  buyerOpenUid: string
  buyerNick: string
  companyKey: string
  triggerEventPartFC?: TriggerEventPartFCType
}) => {
  const handleChange = (newValue: string) => {
    // console.log('111', newValue)
    onChange?.(newValue)
  }
  const onOrderChange = (newValue: string) => {
    triggerEventPartFC?.('REPEAT_CHECK', { value: newValue })
    newValue && triggerEventPartFC?.('ORDER_BACK_REPLACE', { value: newValue })
  }

  return (
    <>
      {isSubField && <SubFieldLabel required={required} label={name} />}
      <div className={isSubField ? 'field-child' : ''}>
        <SelectOrder
          inForm={true}
          value={value}
          shopId={shopId}
          buyerOpenUid={buyerOpenUid}
          buyerNick={buyerNick}
          companyKey={companyKey}
          onChange={handleChange}
          onBlur={onOrderChange}
          onSelect={onOrderChange}
        ></SelectOrder>
      </div>
    </>
  )
}

export default TradeIdInput