import React from 'react'
import TabPane from './TabPane'
import classNames from 'classnames'

const Tabs = React.createClass({

    statics: {
        getDefaultData: function () {
            return [
                {
                    "title": "青春",
                    "content": "1【青春】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。",
                    "active": true
                },
                {
                    "title": "彩虹",
                    "content": "2【青春】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。",
                    "active": false
                },
                {
                    "title": "歌唱",
                    "content": "3【青春】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。",
                    "active": false
                }
            ]
        },

        TabPane: TabPane
    },

    propTypes: {
        defaultActiveIndex: React.PropTypes.number,
        data: React.PropTypes.array
    },

    getInitialState() {
        let defaultActiveIndex = this.props.defaultActiveIndex || 1

        return {
            activeIndex: defaultActiveIndex
        }
    },

    render() {
        return (
            <div data-am-widget="tabs" className='am-tabs am-tabs-default am-no-layout'>
                <ul className='am-tabs-nav am-cf'>
                    {this.renderTabsHeader()}
                </ul>
                <div className="am-tabs-bd">
                    {this.renderTabsContent()}
                </div>
            </div>
        )
    },

    renderTabsHeader(){

        if (this.props.data) {

            return this.props.data.map((item, index) => {
                return this.renderTabsHeaderInner(item, index)
            })

        } else {

            return React.Children.map(this.props.children, (child, index) => {
                if (child && child.type.displayName === 'TabPane') {
                    return this.renderTabsHeaderInner(child, index)
                }
            })
        }
    },

    renderTabsHeaderInner(item, index){
        return (
            <li onClick={this.switchTab.bind(null,index+1)}
                key={index}
                className={classNames({'am-active':this.state.activeIndex === (index+1)})}>
                <a href="javascript:;">{React.isValidElement(item) ? item.props.tab : item.title}</a>
            </li>
        )
    },

    renderTabsContent(){

        if (this.props.data) {

            return this.props.data.map((item, index) => {
                return this.renderTabsContentInner(item, index)
            })

        } else {
            return React.Children.map(this.props.children, (child, index) => {
                if (child && child.type.displayName === 'TabPane') {
                    return this.renderTabsContentInner(child, index)
                }
            })
        }
    },

    renderTabsContentInner(item, index){

        if (!React.isValidElement(item)) {
            item = React.createElement(TabPane, {}, item.content)
        }

        return React.cloneElement(
            item,
            {
                active: this.state.activeIndex === (index + 1),
                key: item.key ? item.key : index
            }
        )
    },

    switchTab(index){
        this.setState({
            activeIndex: index
        })
    }
})

export default Tabs