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

interface params {
    state: any,
    show: Boolean,
    onClose: (Boolean) => void,
    onLink: (any) => void,
    children?: React.ReactNode
    onOff: () => void,
    onFind: () => void,
}

export default memo(({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 => {
                                        return (
                                            <View className={style.item} onClick={() => onLink(item)}>
                                                <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>
                                                }
                                            </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>
            }
        </>
    )
})