import React , {useState}from 'react';
// import Tab from '../navigation/TabNavigator';
import C from 'rn-class'
import Main from '../pages/_6_Main'
import _ from 'lodash'

C.addColor("#c0bb97CC", "color-btnbg-non")
C.addColor("#eec026", "color-btnbg-last")
C.addColor("#c0bb97", "color-btnbg-sel")
        

export default (props)=>{
    let [ sel_idx, setsel_Idx ] =  useState(-1);
    let [ targetIdx, setTargetIdx ] =  useState(0);
    let btns = props.BTNS[targetIdx]; 

    _.forEach(btns, (obj, idx)=>{
        if(idx == sel_idx){ 
            obj["color"] = "bgc-color-btnbg-sel"; 
        }else if(btns.length -1 == idx){
            obj["color"] = "bgc-color-btnbg-last"; 
        }else{
            obj["color"] = "bgc-color-btnbg-non"; 
        }
    });
    let onTabPress= ( obj, idx )=>{
        if(idx == btns.length-1){
            setTargetIdx(targetIdx^1);
            setsel_Idx(-1);
            props.onTabPress && props.onTabPress(targetIdx, -1);  
        }else{
            setsel_Idx(idx);
            props.onTabPress && props.onTabPress(targetIdx, idx);  
        }
        

    }
    
    return (
        <C.View cls="h8 bgc-color-white flx-row ai-e jc-sa">
            {
                Object.keys(btns).map((obj, idx) => { 
                    return ( 
                        <C.TouchableOpacity key={`tab_${idx}`}  cls="flx1 ma0.4" onPress={onTabPress.bind(this, obj, idx)}>
                            <C.View cls={`ai-c jc-c h95% ${btns[obj].color}`}> 
                                <C.Text cls="ta-c f2" allowFontScaling={false}>
                                    {btns[obj].title}
                                </C.Text>  
                                <C.Text cls="f1.5 ta-c color-white" allowFontScaling={false}> 
                                    {btns[obj].subtitle}
                                </C.Text>
                            </C.View>

                        </C.TouchableOpacity>
                    )
                })
            }
           
           {/* <C.EL.Button ccls="flx1 mh0.2" title="住"/>
           <C.EL.Button ccls="flx1 mh0.2" title="坐"/>
           <C.EL.Button ccls="flx1 mh0.2" title="卧"/>
           <C.EL.Button ccls="flx1 mh0.2" title="身"/>  */}
           
            
        </C.View>
    )  


}

