import React, { useEffect, useRef, useState } from 'react'
import { message, Modal } from 'antd'
import { InfoCircleFilled } from '@ant-design/icons'
import { FingerFailInfo, FingerSuccessInfo, Shell } from '../../utils/shell'
import { RendererEnv } from '../../env'
import { Api } from '../../types'
import { Icon } from '../icons'

type FingerData = {
  fingerprint: string
  fingertype: string
}

interface IProps {
  visible: boolean
  userData: any
  env: RendererEnv
  onClose: () => void
}

const FingerPrint: React.VFC<Pick<IProps, 'userData'> & { onDataChange: (fingerData?: FingerData) => void }> = ({ userData, onDataChange }) => {

  const [deviceTip, setDeviceTip] = useState('正在检查设备是否已连接……')

  const [fingerData, setFingerData] = useState<FingerData>()

  useEffect(() => {
    if (Shell.hasShell()) {
      Shell.openFinger(1, () => { }, handleFingerCallback)
    }
    return () => {
      if (Shell.hasShell()) {
        Shell.closeFinger()
      }
    }
  }, [])

  useEffect(() => {
    onDataChange(fingerData)
  }, [fingerData])

  const handleFingerCallback = (res: ShellDoneResult<FingerSuccessInfo | FingerFailInfo>) => {
    const code = res.code
    if (code != undefined) {
      if (code == 0) {
        const data = res.data as FingerSuccessInfo
        if (data.isFinger === true) {
          setFingerData({ fingerprint: data.finger, fingertype: data.fingerType })
          setDeviceTip('识别成功, 请移开手指')
        }
      } else {
        if (code != -63 && code != 999) {
          setDeviceTip(res.msg ?? `code=${code}`)
        }
      }
    } else {
      const data = res.data as FingerFailInfo
      setDeviceTip(data.text)
    }
  }

  return (
    <div className='fingerprint-content'>
      <div className='fingerprint-content-header'>
        <span className='fingerprint-content-header-title'>指纹录入</span>
        <div className='fingerprint-content-header-tip'>
          <InfoCircleFilled style={{ color: '#1890ff', fontSize: 20 }} />
          &nbsp;&nbsp;
          <span>设置指纹前，请确认用户信息</span>
        </div>
      </div>
      <div className='fingerprint-content-body'>
        <div className='fingerprint-content-body-left'>
          <div className='fingerprint-content-body-left-top'>
            <Icon className='fingerprint-content-body-left-top-icon' icon='finger' color='#1890ff' size={100} />
            <span className='fingerprint-content-body-left-top-tip'>{deviceTip}</span>
          </div>
          <span className='fingerprint-content-body-left-bottom' style={{ color: fingerData == undefined ? 'gray' : '#1890ff' }}>{fingerData == undefined ? '等待识别' : '识别成功'}</span>
        </div>
        <div className='fingerprint-content-body-right'>
          <div className='fingerprint-content-body-right-item'>
            <span className='label'>工号</span>
            <div className='value'>{userData?.LOGINACCOUNT ?? ''}</div>
          </div>
          <div className='fingerprint-content-body-right-item'>
            <span className='label'>姓名</span>
            <div className='value'>{userData?.USERNAME ?? ''}</div>
          </div>
          <div className='fingerprint-content-body-right-item'>
            <span className='label'>部门</span>
            <div className='value'>{userData?.DEPARTMENT ?? ''}</div>
          </div>
          <div className='fingerprint-content-body-right-item'>
            <span className='label'>岗位</span>
            <div className='value'>{userData?.JOBNAME ?? ''}</div>
          </div>
        </div>
      </div>
    </div>
  )

}

const FingerPrintModal: React.VFC<IProps> = (props) => {

  const { visible, userData, env, onClose } = props

  const [confirmLoading, setConfirmLoading] = useState(false)

  const fingerData = useRef<FingerData>()

  const handleOk = async () => {
    if (fingerData.current) {
      setConfirmLoading(true)
      const uuid = window.deviceInfo?.uuid ?? ''
      const data = { userId: userData.USERID, uuid, fingerType: Number(fingerData.current.fingertype), fingerprint: fingerData.current.fingerprint }
      const api: Api = {
        method: 'post',
        url: '/api/v1/finger/register',
        data: {
          userId: "${userId}",
          uuid: "${uuid}",
          fingerType: "${fingerType}",
          fingerprint: "${fingerprint}"
        }
      }
      const payload = await env.fetcher(api, data).finally(() => setConfirmLoading(false))
      if (payload.ok) {
        Shell.addFinger(userData.userId, fingerData.current.fingerprint, Number(fingerData.current.fingertype))
        message.success(payload.msg)
        onClose()
      } else {
        message.error(payload.msg)
      }
    } else {
      message.warning('请先录入指纹')
    }
  }

  return (
    <Modal
      width={800}
      className='fingerprint-modal'
      visible={visible}
      destroyOnClose={true}
      closable={false}
      maskClosable={false}
      keyboard={false}
      confirmLoading={confirmLoading}
      bodyStyle={{ padding: '18px 24px' }}
      onCancel={() => onClose()}
      onOk={() => handleOk()}
      okText='确定'
      cancelText='取消'
    >
      <FingerPrint userData={userData} onDataChange={data => fingerData.current = data} />
    </Modal>
  )

}

export default FingerPrintModal