'use strict'

import React from 'react';

import Dropdown from '../Dropdown'

var Nav = React.createClass({

    statics: {

        getDefaultData(){
            return [{
                type: 'text',
                text: '首页',
                url: '#',
                className: 'am-active'
            }, {
                type: 'text',
                text: '首页',
                url: '#',
                className: ''
            }, {
                type: 'Dropdown',
                text: '菜单',
                data: [
                    {
                        type: 'header',
                        text: 'Header'
                    },
                    {
                        type: 'text',
                        text: '1. 一行代码，简单快捷',
                        url: '#',
                        className: ''
                    },
                    {
                        type: 'text',
                        text: '2. 网址不变且唯一',
                        url: '#',
                        className: 'am-active'
                    },
                    {
                        type: 'text',
                        text: '3. 内容实时同步更新',
                        url: '#',
                        className: ''
                    },
                    {
                        type: 'text',
                        text: '4. 云端跨平台适配',
                        url: '#',
                        className: 'am-disabled'
                    },
                    {
                        type: 'divider'
                    },
                    {
                        type: 'text',
                        text: '5. 专属的一键拨叫',
                        url: '#',
                        className: ''
                    }
                ]
            }]
        }
    },

    render: function () {

        var data = this.props.data || Nav.getDefaultData()

        return (
            <ul className="am-nav am-nav-pills">
                {data.map((item) => {
                    if (item.type !== 'Dropdown') {
                        return (
                            <li className={item.className}>
                                <a href={item.url}>{item.text}</a>
                            </li>
                        )
                    } else {
                        return (<Dropdown data={item.data} title={item.text}/>)
                    }
                })}
            </ul>
        )
    }
})

export default Nav