import React from 'react';

import C from 'rn-class'

C.addColor("#d7d7d7", "color-listbg");


export default (props)=>{ 
    let onClickPlay = (p)=>{ 
        // props.navigation.push('Player');
        props.startPlay(props);
    }

    return (
        <C.View cls="flx1 bgc-color-white"> 
            <C.View cls="w100% ai-c flx1">     
                <C.ScrollView cccls="ai-c">  
                    <C.View  cls="w80 br50 flx-row" >  
                        <C.Image source={props.Pages.img} resizeMode="contain"  cls="w14" /> 
                        <C.View>
                            <C.View cls="bgc-color-gray-light-v3 flx0.1 jc-c ph3">   
                            </C.View>
                            <C.Text cls="mt2 mh2">
                                {props.Pages.contens}
                            </C.Text>
                        </C.View>
                    </C.View> 
                 
                 <C.View cls="w100 flx-w jc-c flx-row">
                        <Imgs onClickPlay={onClickPlay} ></Imgs>
                        <Imgs onClickPlay={onClickPlay} ></Imgs>
                        <Imgs onClickPlay={onClickPlay} ></Imgs>
                        <Imgs onClickPlay={onClickPlay} ></Imgs>
                        <Imgs onClickPlay={onClickPlay} ></Imgs>
                        <Imgs onClickPlay={onClickPlay} ></Imgs>
                 </C.View>

                </C.ScrollView>
            </C.View>  

        </C.View>
    )  


}


const Imgs = (props)=>{
    return (
        <C.View cls="w45">
                <C.ImageBackground 
                    source={{uri : `https://picsum.photos/630/300?r=${(new Date).getTime()+Math.random()}` }}
                    cls="h20 mh2 mt2"  
                    // resizeMode="contain"
                >
                    <C.View cls="flx1 bgc-rgba-black-0_3 jc-c">
                        <C.View cls="ai-e po-full">
                            <C.EL.Icon type="entypo" name="lock" ccls="ma2" {...C.n2cls("color-white")}/>
                        </C.View>
                        <C.View cls="ai-c">
                            <C.EL.Icon type="entypo" name="controller-play" ccls="ma2" {...C.n2cls("color-white")}  {...C.n2cls("size10")} onPress={props.onClickPlay}/>
                        </C.View>
                    </C.View>

                    
                </C.ImageBackground>
                <C.View cls="flx1 ai-e mh2">  
                    <C.Text> 
                        10:00
                    </C.Text>
                </C.View>
        </C.View>
    )
}