import { Image, ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
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 styles  from './hightSearchList.module.scss'
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Taro, { useDidShow, usePullDownRefresh, useReady } from "@tarojs/taro";
import {GetLabProductApi} from "@/api/material"
import { dataLoadingStatus, getFilterData } from "@/common/util";
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
import LoadingCard from "@/components/loadingCard";
import useLogin from "@/use/useLogin";
import { goLink } from "@/common/common";
import SelectData, {ListProps} from "./components/selectData";
import LabAndImg from "@/components/LabAndImg";
import useCheckAuthorize from "@/use/useCheckAuthorize";

export default () => {
    useLogin()
    const [showFilter, setShowFilter] = useState(false)
    //搜索参数
    const [searchField, setSearchField] = useState({
        l: '',
        a: '',
        b: '',
        page : 1,
        size : 10,
        width: '',
        weight_density: '',
        product_kind_id: '',
        component: '',
        abstract_sort_key: ''
    })

    //获取面料列表
    const [materialList, setMaterialList] = useState<{list:any[], total:number}>({list:[], total:0})
    const {fetchData: materialFetchData, state: materialState} = GetLabProductApi()
    const getProductList = async () => {
        let {data} = await materialFetchData(getFilterData(searchField))
        setMaterialList({list:data.list, total:data.total})
        Taro.stopPullDownRefresh()
    }

    //监听筛选条件变化
    useEffect(() => {
        getProductList()
    }, [searchField])

    //上拉加载数据
    const pageNum = useRef({size: searchField.size, page: searchField.page})
    const getScrolltolower = () => {
        if(materialList.list.length < materialList.total) {
            pageNum.current.page++
            const size = pageNum.current.size * pageNum.current.page
            setSearchField({...searchField, size })
        }
    }


    //数据加载状态
    const statusMore = useMemo(() => {
        return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading})
    }, [materialList])

    const [scrollStatus, setScrollStatus] = useState(false)
    const onscroll = useCallback((e) => {
        if(e.detail.scrollTop > 20) {
            setScrollStatus(true)
        } else {
            setScrollStatus(false)
        }
    },[])

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

    //监听lab数据变化
    const [blueToothColor, setBlueToothColor] = useState('')
    useEffect(() => {
        if(colorState.deviceLab) {
            const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b])
            setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
            setSearchField({...searchField, l:rgb[0], a:rgb[1], b:rgb[2], size:10})
        }
    }, [colorState.deviceLab])

    const goLinkPage = (item) => {
        goLink('/pages/details/index',{id:item.product_id})
    }

    //获取筛选条件
    const getFiltr = (e) => {
        setMaterialList(() => ({list:[], total:0}))
        const {data} = e
        setSearchField({
            ...searchField,  
            width: data?.width,
            weight_density: data?.weight, 
            size: 10,
            component: data?.element,
            product_kind_id: data?.seriesId
        })
        formatSelectList(e)
    }

    //筛选条件格式化
    const [selectList , setSelectList] = useState<ListProps[]>()
    const formatSelectList = (val = {data:{}, field:{}}) => {
        let data:ListProps[] = []
        for(let key in val.data) {
            if(key !== 'seriesId'&& val.data[key] != '') {
                data.push({title:val.field[key], value:val.data[key]})
            }
        }
        setSelectList([...data])
    }

    //页面下拉刷新
    usePullDownRefresh(() => {
        setSearchField({...searchField ,size : 10})
    })

    //排序
    type sortParam = 'none'|'top'|'bottom'
    const sortComprehensiveRef = useRef<any>(null)
    const sortCollectionRef = useRef<any>(null)
    const [sortStatus, setSortStatus] = useState<{comprehensive:sortParam, collection:sortParam}>({
        comprehensive: 'none',
        collection: 'none'
    })
    const changeSort = (val) => {
        if(val == 1) {
            const {status, value} = sortComprehensiveRef.current.changeSort()
            setSortStatus((e) => ({...e, comprehensive: status, collection: 'none'}))
            setSearchField((e) => ({...e, abstract_sort_key: value}))
        } else {
            const {status, value} = sortCollectionRef.current.changeSort()
            setSortStatus((e) => ({...e, collection: status, comprehensive: 'none'}))
            setSearchField((e) => ({...e, abstract_sort_key: value}))
        }
    }
    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} onClick={() => changeSort(1)}>
                        <Text>综合</Text>
                        <SortBtn status={sortStatus.comprehensive} ref={sortComprehensiveRef} sortValue={{desc: '1', asc: '-1'}}/>
                    </View>
                    <View className={styles.text_sc} onClick={() => changeSort(2)}>
                        <Text>收藏</Text>
                        <SortBtn status={sortStatus.collection} ref={sortCollectionRef} sortValue={{desc: '2', asc: '-2'}}/>
                    </View>
                    
                </View>
                <View className={styles.filter_btn_con}>
                    <View className={styles.filter_scroll}>
                        <SelectData list={selectList}/>
                    </View>
                    <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)}>搜索结果 ({materialList.total}条记录)</View>
                <View className={styles.scroll}>
                   
                    <InfiniteScroll 
                        selfonScrollToLower={() => getScrolltolower()} 
                        selfOnScroll={(e) => onscroll(e)}
                        statusMore={statusMore}
                    >
                        <View className={styles.product_list}>
                            {materialList.list.map(item => {
                                return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
                                    <View className={styles.product_img}>
                                        <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
                                        <View className={styles.color_num}>{(item.product_color_code)}#</View>
                                    </View>
                                    <View className={styles.product_info}>
                                        <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
                                        <View className={styles.introduce}>{item.product_kind_name}</View>
                                    </View>
                                </View>
                            })}
                        </View>
                    </InfiniteScroll>
                </View>
            </View>
            <Filter show={showFilter} onFiltr={(e) => getFiltr(e)} onClose={() => setShowFilter(false)}/>
        </View>
    )
}