import { CustomWrapper, Input, View } from '@tarojs/components'
import { memo, useEffect, useMemo, useRef, useState } from 'react'
import Big from 'big.js'
import classNames from 'classnames'
import styles from './index.module.scss'

interface params {
  minNum?: number // 最小值
  maxNum?: number // 最大值
  step?: number // 步长
  defaultNum?: number // 默认值
  digits?: number // 多少位小数
  onChange?: (val: number) => void
  onBlue?: (val: number) => void // 失去焦点触发
  onClickBtn?: (val: number) => void
  unit?: string
  disabled?: true | false // 是否禁用
  returnZero?: true | false // 少于最小值时是否归0
}

const CounterDisplayName = (props: params) => {
  const {
    minNum = 0,
    maxNum = 10000,
    step = 1,
    digits = 0,
    defaultNum = 0,
    onChange,
    onBlue,
    onClickBtn,
    returnZero = false,
    unit = '',
    disabled = false,
  } = props
  const [value, setValue] = useState<any>({ count: defaultNum })
  // 保留小数
  const formatDigits = (num) => {
    num = `${num}`
    if (num.includes('.')) {
      const res = num.split('.')
      if (digits > 0) {
        const last_num = res[1].substr(0, digits)
        return `${res[0]}.${last_num}`
      }
      else {
        return res[0]
      }
    }

    return parseFloat(num)
  }
  useEffect(() => {
    setValue({ count: defaultNum })
  }, [defaultNum])
  const onPlus = () => {
    if (disabled) { return false }
    const count = value.count
    let num_res = Big(count).add(step).toNumber()
    num_res = num_res >= maxNum ? maxNum : num_res
    num_res = formatDigits(num_res)
    setValue({ ...value, count: num_res })
    onChange?.(parseFloat(num_res))
    onClickBtn?.(parseFloat(num_res))
  }
  const minus = () => {
    if (disabled) { return false }
    const count = value.count
    let num_res = Big(count).minus(step).toNumber()
    if (returnZero) {
      num_res = num_res < minNum ? 0 : num_res
    }
    else {
      num_res = num_res < minNum ? minNum : num_res
    }
    setValue({ ...value, count: num_res })
    onChange?.(parseFloat(num_res))
    onClickBtn?.(parseFloat(num_res))
  }

  // 检查数据
  const checkData = (val) => {
    const num = parseFloat(val)
    if (num > maxNum) { return maxNum }
    if (num < minNum) { return minNum }
    return val
  }

  const onInputEven = (e) => {
    // const res = e.detail.value
    // if (res === '') {
    //   onChange?.(minNum)
    // }
    // else if (!Number.isNaN(Number(res))) {
    //   let count = formatDigits(res)
    //   count = checkData(count)
    //   onChange?.(parseFloat(count as string))
    // }
    // else {
    //   const num = parseFloat(res)
    //   if (!Number.isNaN(num)) {
    //     let count = formatDigits(num)
    //     count = checkData(count)
    //     onChange?.(count as number)
    //   }
    //   else {
    //     onChange?.(defaultNum)
    //   }
    // }
  }

  const onBluerEven = (e) => {
    const num = parseFloat(e.detail.value)
    if (e.detail.value == '') {
      onBlue?.(minNum < 0 ? 0 : minNum)
      setValue({ count: minNum < 0 ? 0 : minNum })
    }
    else if (!Number.isNaN(num)) {
      let count = formatDigits(num)
      count = checkData(count)
      setValue({ count })
      onBlue?.(count as number)
    }
    else {
      setValue({ count: minNum })
      onBlue?.(minNum)
    }
  }
  return (
    <View className={styles.main} onClick={e => e.stopPropagation()}>
      <View className={classNames(styles.btn, styles.left_btn)} onClick={() => minus()}>
        -
      </View>
      <View className={styles.input}>
        <Input type="digit" value={value.count} onInput={onInputEven} onBlur={onBluerEven} disabled={disabled} alwaysEmbed cursorSpacing={150} />
        <View className={styles.unit}>{unit}</View>
      </View>
      <View className={classNames(styles.btn, styles.right_btn)} onClick={() => onPlus()}>
        +
      </View>
    </View>
  )
}
const Counter = memo(CounterDisplayName)
const CounterWithMemo = (props: params) => {
  return <Counter {...props}></Counter>
}
export default memo(CounterWithMemo)
