import { ScrollView, View } from "@tarojs/components";
import { memo, useState, ReactNode, useEffect } from "react";
import classnames from "classnames";
import styles from './index.module.scss'


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

type Params = {
    list?: ListProps[],
    defaultValue?: number|string,
    children?: ReactNode,
    tabsOnClick?: (ListProps) => void,
    style?:Object,

}

export default memo(({list = [], defaultValue = 0, tabsOnClick, style={}}: Params) => {
    
    const [selected, setSelected] = useState(defaultValue)
    const [tabId, setTabId] = useState('')

    useEffect(() => {
        const index = list?.findIndex(item => {
            return item.value == defaultValue  
        })
        if(index !== -1) {
            const num = index > 0?( index - 1) : 0
            setTabId(list[num].value.toString())
        }
    }, [])

    const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
        setSelected(item.value)
        tabsOnClick?.(item)
        const num = index > 0?( index - 1) : 0
        setTabId(list[num].value.toString())
    }
    return (
        <>
            <View className={styles.tabs_main} id="tabs_main_ref">
                <ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation={true} scrollIntoView={`tabs_${tabId}`}>
                    <View className={styles.tabs_scroll}>
                        {
                            list.map((item, index) => {
                                return (
                                    <View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
                                        <View  className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
                                    </View>
                                )
                            })
                        }
                    </View>
                </ScrollView>
            </View>
        </>
    )
})