import { Image, ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
import SearchInput from "@/components/searchInput";
import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth";
import {useBluetooth} from "@/use/contextBlueTooth"
import {toRgb} from '@/common/bluetooth/color/colorSpace'
import Tabs from "@/components/tabs";
import styles  from './hightSearchList.module.scss'
import { useCallback, useEffect, useState } from "react";
import Taro, { useReady } from "@tarojs/taro";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";

export default () => {
    const [showFilter, setShowFilter] = useState(false)
    const [selectList, setSelectList] = useState([
        {title: '系列', value:1},
        {title: '系列', value:2},
        {title: '系列', value:3},
        {title: '系列', value:4},
        {title: '系列', value:5},
        {title: '系列', value:5},
        {title: '系列', value:5},
        {title: '系列', value:5},
        {title: '系列', value:5},
    ])
    const [scrollStatus, setScrollStatus] = useState(false)
    const onscroll = useCallback((e) => {
        if(e.detail.scrollTop > 20) {
            setScrollStatus(true)
        } else {
            setScrollStatus(false)
        }
    },[])

    const {state, measureAndGetLab} = useBluetooth()
    const getLab = () => {
        if(state.connected) {
            measureAndGetLab()
        } else {
            Taro.showToast({
                title: '请链接设备',
                icon: 'none'
            })
        }
    }

    const [blueToothColor, setBlueToothColor] = useState('')
    useEffect(() => {
        if(state.deviceLab) {
            console.log('颜色：',state.deviceLab)
            const rgb = toRgb([state.deviceLab.L, state.deviceLab.a, state.deviceLab.b])
            setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
        }
    }, [state.deviceLab])

    //页面下拉刷新
    const res = useManualPullDownRefresh()
    return (
        <View className={styles.main}>
            <View className={styles.search}>
                <View className={styles.SearchInput}>
                    <LinkBlueTooth/>
                    <SearchInput title="提取颜色" showBorder={false}>
                        <View className={styles.bluetooth_color} onClick={() => getLab()}>
                            {blueToothColor&&<View className={classnames(styles.color_bock)} style={{background:blueToothColor}}></View>||
                                <View className={classnames(styles.color_bock_no)} >请取色</View>
                            }
                        </View>
                    </SearchInput>
                </View>
            </View>
            <View className={styles.filter}>
                <View className={styles.filter_all}>
                    <View className={styles.text_zh}>
                        <Text>综合</Text>
                        <SortBtn status="top"/>
                    </View>
                    <View className={styles.text_sc} >
                        <Text>收藏</Text>
                        <SortBtn status="top"/>
                    </View>
                    
                </View>
                <View className={styles.filter_btn_con}>
                    <ScrollView scrollX className={styles.filter_scroll}>
                        <View className={styles.filter_btn}>
                                <View>系列</View>
                                <View>幅宽</View>
                                <View>克重</View>
                                <View>克重</View>
                                <View>克重</View>
                                <View className={styles.selected}>成分</View>
                        </View>
                    </ScrollView>
                    <View className={styles.filter_more} onClick={() => setShowFilter(true)}>
                        <Text>筛选</Text>
                        <Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
                    </View>
                </View>
            </View>
            <View className={styles.list}>
                <View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
                <View className={styles.scroll}>
                    <InfiniteScroll 
                        selfonScrollToLower={() => console.log('123123')} 
                        selfOnScroll={(e) => onscroll(e)}
                    >
                        <View className={styles.product_list}>
                            {new Array(9).fill(' ').map(item => {
                                return <View className={styles.product_item}>
                                    <View className={styles.product_img}>
                                        <Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
                                        <View className={styles.color_num}>25色</View>
                                    </View>
                                    <View className={styles.product_info}>
                                        <View className={styles.title}>0770#21S精棉平纹</View>
                                        <View className={styles.introduce}>平纹系列</View>
                                    </View>
                                </View>
                            })}
                        </View>
                    </InfiniteScroll>
                </View>
            </View>
            <Filter show={showFilter} onClose={() => setShowFilter(false)}/>
        </View>
    )
}