import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react'
import classNames from 'classnames'
import { CloseOutlined } from '@ant-design/icons'
import { VerifyWrapper } from './style'
import VerifySlide, { type VerifySlideRef } from './Verify/VerifySlide'

// import VerifyPoints from './Verify/VerifyPoints';

export interface VerifyRef {
  show: () => void
}

interface VerifyProps {
  mode?: string
  imgSize?: Record<string, string>
  barSize?: Record<string, string>
  blockSize?: Record<string, string>
  captchaType: string
  figure?: number
  arith?: number
  vSpace?: number
  explain?: string
}

const Verify = memo(
  forwardRef<VerifyRef, VerifyProps>(
    (
      {
        mode = 'pop',
        imgSize = { width: '310px', height: '155px' },
        barSize,
        blockSize,
        captchaType,
        vSpace,
        explain
      },
      ref
    ) => {
      const instanceRef = useRef<VerifySlideRef>(null)
      // 刷新
      const refresh = () => {
        if (instanceRef.current?.refresh) {
          instanceRef.current.refresh()
        }
      }
      const [showBox, setShowBox] = useState(false)
      const [clickShow, setClickShow] = useState(false)
      // 对外暴露方法
      useImperativeHandle(ref, () => {
        return {
          show
        }
      })
      const show = () => {
        if (mode === 'pop') {
          setClickShow(true)
        }
      }
      const closeBox = () => {
        setClickShow(false)
        refresh()
      }
      useEffect(() => {
        if (mode === 'pop') {
          setShowBox(clickShow)
        } else {
          setShowBox(true)
        }
      }, [clickShow, mode])
      // 监听验证码类型改变
      const [useVerifyType, setVerifyType] = useState<string | undefined>(undefined) // 内部类型
      const [useComponentType, setComponentType] = useState<Nullable<string>>(null) // 所有组件类型
      useEffect(() => {
        switch (captchaType.toString()) {
          case 'blockPuzzle':
            setVerifyType('2')
            setComponentType('VerifySlide')
            break
          case 'clickWord':
            setVerifyType('')
            setComponentType('VerifyPoints')
            break
        }
      }, [captchaType])
      const setClickShowFn = (bol: boolean) => {
        setClickShow(bol)
      }
      const componentMap = {
        VerifySlide: (
          <VerifySlide
            ref={instanceRef}
            captchaType={captchaType}
            type={useVerifyType}
            mode={mode}
            vSpace={vSpace}
            explain={explain}
            imgSize={imgSize}
            blockSize={blockSize}
            barSize={barSize}
            setClickShowFn={setClickShowFn}
            closeBoxFn={closeBox}
          />
        ),
        VerifyPoints: (
          // <VerifyPoints
          //   ref={instanceRef}
          //   captchaType={captchaType}
          //   verifyType={useVerifyType}
          //   figure={figure}
          //   arith={arith}
          //   mode={mode}
          //   vSpace={vSpace}
          //   explain={explain}
          //   imgSize={imgSize}
          //   blockSize={blockSize}
          //   barSize={barSize}
          //   setClickShowFn={setClickShowFn}
          //   closeBoxFn={closeBox}
          // />
          <></>
        )
      }
      return (
        showBox && (
          <VerifyWrapper className={classNames({ mask: mode === 'pop' })}>
            <div
              className={classNames({ verifybox: mode === 'pop' })}
              style={{ maxWidth: parseInt(imgSize.width) + 30 + 'px' }}>
              {mode === 'pop' && (
                <div className='verifybox-top'>
                  安全验证
                  <span className='verifybox-close' onClick={closeBox}>
                    <CloseOutlined className='icon-close' />
                  </span>
                </div>
              )}
              <div className='verifybox-bottom' style={{ padding: mode === 'pop' ? '15px' : '0' }}>
                {/* 验证码容器 */}
                {useComponentType && componentMap[useComponentType as keyof typeof componentMap]}
              </div>
            </div>
          </VerifyWrapper>
        )
      )
    }
  )
)

export default Verify
