import { ScrollView, View } from '@tarojs/components'
import { memo, useEffect, useState } from 'react'
import style from './css/popup.module.scss'
import Loading from '@/components/loading'

interface params {
  state: any
  show: Boolean
  onClose: (Boolean) => void
  onLink: (any) => void
  children?: React.ReactNode
  onOff: () => void
  onFind: () => void
}
const Popup = ({ state, show = false, onClose, onLink, onOff, onFind }: params) => {
  const [popupShow, setPopupShow] = useState(show)
  useEffect(() => {
    setPopupShow(show)
  }, [show])
  const onCloseListener = () => {
    onClose(false)
  }

  return (
    <>
      {
        popupShow && <View className={style.popup}>
          <View className={style.content}>
            <View className={style.title}>搜索设备</View>
            <View className={style.list}>
              <ScrollView scrollY className={style.scroll}>
                {
                  (state.devices && state.devices.length > 0)
                    ? state?.devices.map((item, key) => {
                      return (
                        <View className={style.item} onClick={() => onLink(item)} key={key}>
                          <View>{item.name}</View>
                          {
                            (!state.connecting && !state.connected)
                              ? <View >链接</View>
                              : (state.connecting && (item.deviceId == state.connecting.deviceId))
                                ? <View className={style.link_ing}>正在链接...</View>
                                : (state.connected && (item.deviceId == state.connected.deviceId)) ? <View className={style.link_success}>链接成功</View> : null
                          }
                        </View>
                      )
                    })
                    : <View className={style.noDevice}>
                      {
                        (!state.discovering)
                          ? <>
                            <View>暂无设备,请按以下条件检查</View>
                            <View className={style.n_item}>1.请确保取色仪处于激活状态</View>
                            <View className={style.n_item}>2.请确保取色仪没有链接其他设备</View>
                            <View className={style.n_item}>3.请打开手机定位</View>
                          </>
                          : <View>设备搜索中</View>
                      }

                    </View>

                }
              </ScrollView>
            </View>
            {
              state.connected
                ? <View className={`${style.footer} ${style.footer_off}`} onClick={onOff}>断开链接</View>
                : (!state.connected && state.discovering)
                  ? <View className={`${style.footer} ${style.finding}`}>搜索中<Loading width={30} color="orange" /></View>
                  : <View className={style.footer} onClick={onFind}>重新搜索</View>
            }
          </View>
          <View className={style.mask} onClick={onCloseListener}></View>
        </View>
      }
    </>
  )
}
export default memo(Popup)
