const SmsVerify = ({
  onComplete,
  onChange
}: {
  onComplete?: (code: string) => void
  onChange?: (value: string) => void
}) => {
  const [code, setCode, getCode] = useGetState<string[]>([])
  const inputRefs = useRef<(HTMLInputElement | null)[]>([])

  useEffect(() => {
    const seat = new Array(6).fill('')
    setCode(seat)
  }, [])

  useEffect(() => {
    // 当所有格子都填满时触发完成回调
    if (code.every((v) => v !== '') && onComplete) {
      onComplete(code.join(''))
    }
    onChange?.(code.join(''))
  }, [code, onComplete])

  const handleOnChange = ({
    value,
    index
  }: {
    value: string | number
    index: number
  }) => {
    // 将value转换为字符串并确保只保留数字
    const stringValue = String(value).replace(/[^0-9]/g, '')
    // 只取第一个数字
    const singleDigit = stringValue.slice(0, 1)

    if (singleDigit) {
      setCode(
        produce((draft) => {
          draft[index] = singleDigit
        })
      )
      // 自动聚焦下一个输入框
      if (index < 5) {
        inputRefs.current[index + 1]?.focus()
      }
    }
  }

  const handleKeyDown = (
    e: React.KeyboardEvent<HTMLInputElement>,
    index: number
  ) => {
    if (e.key === 'Backspace') {
      // 当前格子为空时,删除键将焦点移到上一个输入框
      setCode(
        produce((draft) => {
          draft[index] = ''
        })
      )
      inputRefs.current[index - 1]?.focus()
      e.preventDefault()
    }
  }

  return (
    <div className="sms-verify">
      <div className="flex gap-[0.1rem]">
        {code.map((value, index) => {
          return (
            <InputNumber
              className={classNames('text-[0.4rem]', { 'has-content': value })}
              ref={(el) => {
                if (el) {
                  inputRefs.current[index] = el
                }
              }}
              type="tel"
              value={value}
              key={'T-' + index}
              controls={false}
              onKeyDown={(e) => handleKeyDown(e, index)}
              onInput={(value) =>
                handleOnChange({ value: value || '', index })
              }
            />
          )
        })}
      </div>
    </div>
  )
}