import { ScrollView, View } from "@tarojs/components"
import { memo, ReactNode, useState } from "react"
import style from "./index.module.scss"
import DotLoading from "@/components/dotLoading"

type Params = {
    styleObj?: Object,
    selfonScrollToLower?: () => void,
    hasMore?: false|true,
    moreStatus?: false|true,
    children?: ReactNode,
    lowerThresholdNum?: number,
    selfOnScrollToUpper?:() => void
    selfOnScroll?:(val:any) => void
    selfOnRefresherPulling?: () => void
    selfOnRefresherRefresh?: () => void
    selfOnRefresherRestore?: () => void
    selfOnRefresherAbort?: () => void
    paddingBottom?: number,
    refresherTriggered?: true|false,
    refresherEnabled?: true|false,
}
export default memo(({
    styleObj, 
    selfonScrollToLower, 
    selfOnScrollToUpper,
    selfOnScroll,
    selfOnRefresherPulling,
    selfOnRefresherRefresh,
    selfOnRefresherRestore,
    selfOnRefresherAbort,
    hasMore=true, 
    children, 
    lowerThresholdNum = 5, 
    paddingBottom = 0,
    refresherTriggered = false,
    refresherEnabled = false,
    moreStatus = true
}: Params) => {
    const scrollToLower = () => {
        selfonScrollToLower?.()
    }
    const scrollToUpper = () => {
        selfOnScrollToUpper?.()
    }
    const scroll = (e) => {
        selfOnScroll?.(e)
    }
    const refresherPulling = () => {
        selfOnRefresherPulling?.()
    }
    const refresherRefresh = () => {
        selfOnRefresherRefresh?.()
    }
    const refresherRestore = () => {
        selfOnRefresherRestore?.()
    }
    const refresherAbort = () => {
        selfOnRefresherAbort?.()
    }

    return (
        <>
            <ScrollView 
                style={styleObj}  
                className={style.scroll_main} 
                scrollY 
                onScrollToLower={() => scrollToLower()}
                onScrollToUpper={() => scrollToUpper()}
                onScroll={(e) => scroll(e)}
                lowerThreshold={lowerThresholdNum}
                refresherEnabled = {refresherEnabled}
                refresherTriggered = {refresherTriggered}
                onRefresherPulling = {() => refresherPulling()}
                onRefresherRefresh = {() => refresherRefresh()}
                onRefresherRestore = {() => refresherRestore()}
                onRefresherAbort = {() => refresherAbort()}
                refresherBackground ='#F8F8F8'
            >
                <View style={{paddingBottom:paddingBottom + 'rpx'}}>
                    {children}
                    {moreStatus&&<View className={style.infinite_scroll}>
                        {
                            hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
                            <View>没有更多数据了</View>
                        }
                    </View>}
                </View>
                
                <View className="common_safe_area_y"></View>
            </ScrollView>
            
        </>
    )
})