import React , {useEffect, useState} from 'react';

import C from 'rn-class'
import Net from '../provider/Net';
import moment from 'moment';
C.addColor("#d7d7d7", "color-listbg");

const BASE_URL = 'http://133.186.211.179/api/v3/meditation/'

export default (props)=>{ 
    let [list, setList ] = useState([]);
    let onClickPlay = (p)=>{ 
        const tmp = p;
        tmp.soundURI = BASE_URL+p.naration;
        tmp.img = BASE_URL+p.poster;
        tmp.date = moment(p.createdAt).format('MM-DD')
        props.startPlay(tmp);
    }

    let getData = async (p)=>{
        let {Pages : {type  :type } , Pages : {section  :section }    } = p ;
        let {result} = await Net.meditation({size : 20, page	: 1 ,section : section , type : type});
        setList(result);
        // console.log({size : 20, page	: 1 ,section : section , type : type});
    }   
    
    useEffect((a)=>{
        getData(props) 
    }, [props.Pages]);

    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 flx-row"> 
                   
                        {  
                            list.map((v,i) => {
                                return (<Imgs key={`i${v.title}`}  {...v} soundDuration={v.soundDuration} onClickPlay={()=>{
                                    onClickPlay(v)
                                }} />); 
                            })
                        }
                 </C.View>
                    {
                        props.bPlay ? 
                        <C.View cls="h10" /> : null

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

        </C.View>
    )  


}


const Imgs = (props)=>{
    return (
        <C.View cls="w45 mh2 br3">
                <C.ImageBackground 
                    source={{uri : `${BASE_URL}${props.poster}` }}
                    cls="h20 mh2 mt2 "
                    imgcls="br3"    
                    // resizeMode="contain"
                >
                    <C.View cls="flx1 bgc-rgba-black-0_3 jc-sb br3">
                        <C.View cls="ai-e">
                            {
                                props.charge == 0 || props.charge ==  null ? (  
                                    <C.Icon5  name="lock-open" cls="ma2 f2.3" {...C.n2cls("color-white")}/>
                                ):  <C.Icon5  name="lock" cls="ma2 f2.3" {...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 cls="w100% jc-c ai-c flx0.7  bgc-rgba-black-0_4 br3">
                            <C.Text cls="f2 color-white">  
                                {props.title} 
                            </C.Text>
                        </C.View>
                    </C.View>

                    
                </C.ImageBackground >
                <C.View cls="flx1 ai-e mh2">  
                    <C.Text> 
                        {
                            props.naration_duration ? 
                            (props.naration_duration/60).toFixed(2).replace(".",":") : ""
                            
                        }
                    </C.Text>
                </C.View>
        </C.View>
    )
}