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

import C from 'rn-class'
import Net from '../provider/Net'
import {BTNS_ORG as BTNS} from '../data/dummy';
import _ from 'lodash'
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 [todayItem , setTodayItem] = useState({content : ""});
    let [weekdayList , setWeekdayList] = useState([]);
    let [weekendList , setWeekendList] = 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 getList = async (p)=>{
        let {Pages : {type  :type } , Pages : {section  :section }    } = p ;
        let {result} = await Net.meditation({size : 20, page	: 1 ,section : section , type : type , rcmd:"A"});
        _.forEach(result , (obj)=>{
            // console.log(obj)
            for ( idx in BTNS){
                let rtn =  _.find(BTNS[idx] ,{"type":obj.type, "section" : obj.section} )
                if(rtn){
                    obj.categoryText = `${rtn.type} - ${rtn.contensTitle}`;
                }
            }
        })
        let tdayDatas = _.filter(result, {recommand: "T"});
        if(tdayDatas.length){
            setTodayItem(tdayDatas[0]);
        }
        //console.log(_.filter(result, {recommand: "WD"}));
        setWeekdayList(_.filter(result, {recommand: "WD"}));
        setWeekendList(_.filter(result, {recommand: "WE"}));
        
    }

    useEffect(()=>{
        getList(props);
    },[])
    return (
        <C.View cls="flx1 bgc-color-white"> 
            <C.View cls="w100% ai-c flx1"> 
                <C.ScrollView>
                    {/* main */}
                    <C.View cls="h28  w100 ai-c pt2">
                        <C.ImageBackground 
                                 source={{uri : `${BASE_URL}${todayItem.poster}` }} 
                                cls="w80 flx1 h20"  
                                // resizeMode="contain"
                                > 
                            <C.View cls="flx1 bgc-rgba-black-0_3"> 
                                
                                    <C.View cls="flx-row w100% jc-sb ph5 pt0.6">
                                        <C.Text cls="f2.3 color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 ">
                                            오늘의 생각   
                                        </C.Text>
                                        <C.Text cls="f2.3 color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 ">
                                            {
                                                todayItem.categoryText 
                                            } 
                                        </C.Text>
                                    </C.View>
 
                                    <C.View cls="w100% ai-c pt1">
                                        <C.Text cls="f3.4 color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 ">
                                            마음의 양식  
                                        </C.Text>
                                        <C.Text cls="f2.2 ta-c w80% flx-w color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 mt1">
                                            { 
                                                todayItem.content && todayItem.content.length > 30? todayItem.content.substr(0,30) + "..." : todayItem.content
                                            }
                                        </C.Text>
                                    </C.View>

                                    <C.View cls="w100% ai-c pt2">
                                        <C.EL.Icon type={"entypo"} name="controller-play" {...C.n2cls("color-white")} {...C.n2cls("size9")} onPress={()=>{onClickPlay(todayItem)}}/>
                                    </C.View>
                            </C.View>
                        </C.ImageBackground>


                        
                    </C.View>
                    {/* weekday*/}
                    <C.View cls="w100% mt2 bgc-rgba-gray-dark-0_2 ph3">
                        <C.Text cls="f2.6">
                            weekday
                        </C.Text>
                    </C.View>
                    <C.View cls="pt2">
                         <C.ScrollView horizontal cls="pv1"> 
                         {
                            weekdayList.map((v)=>{

                                return (<Imgs key={`i${v.title}`}  {...v} soundDuration={v.soundDuration} onClickPlay={()=>{
                                    onClickPlay(v)
                                }} />)
                            }) 
                        }
                         </C.ScrollView>
                    </C.View>


                    <C.View cls="w100% mt2 bgc-rgba-gray-dark-0_2 ph3">
                        <C.Text cls="f2.6">
                            weekend
                        </C.Text> 
                    </C.View>
                    <C.View cls="pt2">
                         <C.ScrollView horizontal cls="pv1"> 
                         {
                            weekendList.map((v)=>{
                                return (<Imgs key={`i${v.title}`}  {...v} soundDuration={v.soundDuration} onClickPlay={()=>{
                                    onClickPlay(v)
                                }} />)
                            }) 
                        }

                         </C.ScrollView>
                    </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>
    )
}
// const Imgs = ()=>{
//     return (
//         <C.ImageBackground 
//             source={{uri : `https://picsum.photos/630/300?r=${(new Date).getTime()+Math.random()}` }}
//             cls="w45 flx1 h20 mh2 "  
//             // resizeMode="contain"
//         >
//              <C.View cls="flx1 bgc-rgba-black-0_3 ai-e">
//                 <C.EL.Icon type="entypo" name="lock" ccls="ma2" {...C.n2cls("color-white")}/>
//              </C.View>
//         </C.ImageBackground>
//     )
// }