import { ScrollView, View } from "@tarojs/components"
import { memo, ReactNode, useRef, useState } from "react"
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { useReady } from "@tarojs/taro";
import InfiniteScroll from "../infiniteScroll";

type ListProps = {
    title: string,
    value: number
}

type Params = {
    list?: ListProps[],
    defaultValue?: number|string,
    children?: ReactNode,
    height?: string,
    heightItem?: number,
    sideBarOnClick?: (ListProps) => void
}

export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClick, children, heightItem = 100}: Params) => {
    
    let num_half = useRef(0)

    const [selected, setSelected] = useState(defaultValue)
    const [tabId, setTabId] = useState('')

    const init = () => {
        const index = list?.findIndex(item => {
            return item.value == defaultValue
        })
        if(index !== -1) {
            computeSelectTab(index)
        }
    }

    const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
        setSelected(item.value)
        sideBarOnClick?.(item)
        computeSelectTab(index)
    }
    
    const computeSelectTab = (index) => {
        if((index + 1) > num_half.current) {
            let num = index + 1 - num_half.current
            setTabId(list[num].value.toString())
        } else {
            setTabId(list[0].value.toString())
        }
    }

    useReady(() => {
        Taro.nextTick(() => {
            let query = Taro.createSelectorQuery();
            query.select('.side_bar_select').boundingClientRect(rect=>{
                console.log('rect::',rect)
                let clientHeight = rect.height;
                let clientWidth = rect.width;
                let ratio = 750 / clientWidth;
                let height = clientHeight * ratio;
                num_half.current = Math.ceil(height/2/heightItem)
                init()
            }).exec();
        })
    })

    //触底事件
    const onScrolltolower  = () => {
        console.log('触底了')
    }

    return (
        <>
            <View className={classnames(styles.sideBar_main,'side_bar_select')}>
                <ScrollView scrollWithAnimation={true} style={{height}} className={styles.sideBar_select} scrollY scrollIntoView={`tab_${tabId}`}>
                    {
                        list?.map((item, index) => {
                            return(
                                <View  
                                    className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.value)})}
                                    onClick={() => clickEvent({item, index})}
                                    id={`tab_${item.value}`}
                                    key={item.value}
                                    style={{height:heightItem+'rpx'}}
                                >
                                    <View className={styles.title_con}>
                                        {item.title}
                                    </View>
                                </View>
                            )
                        })
                    }
                    <View className="common_safe_area_y"></View>
                </ScrollView>
                <View className={styles.sideBar_con}>
                    <InfiniteScroll selfonScrollToLower={() => onScrolltolower()}>
                        {children}
                    </InfiniteScroll>
                </View>
            </View>
            
        </>
    )
})