
/**
*  标签选择
*/

import React, { useMemo, useState } from 'react';
import { Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native';
import defaultStyle from '../../configs/defaultStyle';
import Icon from '../icon';


interface Props {

    /**
    *  样式
    */
    style?: ViewStyle,

    /**
    *  类型 slider：滑块   icon:图标
    */
    type?: 'slider' | 'icon'

    /**
    *  选择项
    */
    index?: number

    /**
    *  tab 按钮
    */
    tabItems: { title: string, icon?: number, selectIcon?: number, iconStyle?: TextStyle }[]

    /**
    *  选择事件
    */
    onSelect?: (index: number | undefined) => void;

}

export default function TabBar(props: Readonly<Props>) {

    const [index, setIndex] = useState(props.type == 'slider' ? 0 : props.index)

    useMemo(() => {
        setIndex((props.type == 'slider' && props.index == undefined) ? 0 : props.index)
    }, [props.index])

    // 点击事件 
    let onItemClick = (i: number) => {
        if (index == i && props.type != 'slider') {
            setIndex(undefined)
        } else {
            setIndex(i)
        }
        props.onSelect && props.onSelect(index)
    }

    return (
        <View style={{ height: 40, flexDirection: 'row', justifyContent: 'space-around', borderBottomColor: '#eee', borderBottomWidth: 0.5, ...props.style }}>
            {
                props.tabItems.map((tab, i) => {
                    let select = i == index
                    if (props.type == 'slider') {
                        return (
                            <TouchableOpacity style={{ alignSelf: 'stretch', flex: 1 }}
                                onPress={() => onItemClick(i)}>
                                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                    <Text style={{ color: select ? defaultStyle.color.mainColor : 'rgba(0,0,0,0.8)', fontSize: 14, textAlign: 'center' }}>{tab.title}</Text>
                                </View>
                                <View style={{ height: 2, backgroundColor: select ? defaultStyle.color.mainColor : '#00000000' }} />
                            </TouchableOpacity>
                        )
                    } else {
                        return (
                            <TouchableOpacity style={{ flexDirection: 'row', alignSelf: 'stretch', alignItems: 'center' }}
                                onPress={() => onItemClick(i)}>
                                <Text style={{ color: select ? defaultStyle.color.mainColor : 'rgba(0,0,0,0.8)', fontSize: 14 }}>{tab.title}</Text>
                                <Icon style={{ color: select ? defaultStyle.color.mainColor : 'rgba(0,0,0,0.8)', fontSize: 8, marginLeft: 3, ...tab.iconStyle }}
                                    iconCode={select ? (tab.selectIcon || 0xe9ca) : (tab.icon || 0xe66b)} />
                            </TouchableOpacity>
                        )
                    }
                })
            }
        </View >
    )

}
