import { View, Text, Image } from '@tarojs/components'
import './index.less'
import React, { useCallback, useState, useEffect } from 'react'
import bottomImg from '@src/icon/bottom.png'
import classifyStore from '@src/store/classIfy'
type props = {
    open: boolean,
    typeValue: {
        name: string,
        id: number
    }[],
    typeTabIndex?: {
        name: string,
        id: number
    },  // tab选中第几个  默认1
    onCallback?: (value: any) => void,     // 切换回调函数
    workDirection: 0 | 1,//频道
}


/**分类页面顶部分类选择*/
const BookTypeTabs = (props: props) => {
    let { typeValue, typeTabIndex, workDirection, onCallback, open } = props

    //选择
    let selectHandle = useCallback((value: { id: number, name: string }) => {
        classifyStore.setData({ categoryId: value })
    }, [])
    //展示更多
    let openHandle = useCallback(() => {
        onCallback?.(!open)
    }, [open])
    return <>
        <View className="BookTypeTabs">
            {
                typeValue?.map((item, index) => {
                    if (!open && index < 4) {
                        return <View className="typeTab">
                            <View className={`${item.id === typeTabIndex?.id ? 'select' : ''}`} onClick={() => { selectHandle(item) }}>
                                <Text>{item.name}</Text>
                            </View>
                        </View>
                    } else if (open) {
                        return <View className="typeTab">
                            <View className={`${item.id === typeTabIndex?.id ? 'select' : ''}`} onClick={() => { selectHandle(item) }}>
                                <Text>{item.name}</Text>
                            </View>
                        </View>
                    }

                })
            }
        </View>
        {
            typeValue.length > 4 && <View className="more" onClick={openHandle}>
                <Text>{open ? "收起" : "查看更多"}</Text> <Image src={bottomImg} style={open ? { transform: "rotate(180deg)" } : {}} />
            </View>
        }
    </>
}

export default React.memo(BookTypeTabs)