import React, { Component } from 'react'
import './video-catalog.scss'
import classnames from 'classnames'


class VideoCatalog extends Component {

    handleClick = (i) => {
        this.props.selectVideo(i)
    }

    render() {
        return (
            <div className='video-catalog'>
                <ul>
                    {
                        this.props.videoCatalog.map((item, index) => {
                            return (
                                <li key={item.id}
                                    className={classnames({active: this.props.activeIndex === index})}
                                >
                                    <div className="video-title" onClick={this.handleClick.bind(this, index)}>
                                        <span className="title">{item.name}</span>
                                        <span className='duration'>{item.duration}</span>
                                        <i className={classnames(`iconfont`,
                                            [item.video_auth === 0
                                                ? 'iconiconfront-74'
                                                : 'iconplay_hovericon'],
                                        )}/>
                                    </div>
                                    {
                                        (item.practice && item.practice.qid) ? <div className="exercise">
                                                课后练习：{item.practice.title}
                                                <i className={classnames('iconfont', item.practice.is_tested ? 'iconiconfront-3' : 'iconiconfront-74')}/>
                                                {/*<i className='iconfont iconiconfront-74'/>*/}
                                            </div>
                                            : null
                                    }
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default VideoCatalog;