'use strict'

import React from 'react';

export default React.createClass({

    componentDidMount: function () {
        var el = this.refs.dropdown.getDOMNode()

        var $ = el.ownerDocument.defaultView.$

        //初始化下拉组件
        $(el).dropdown({
            justify: '#doc-dropdown-justify-js'
        });
    },

    render: function () {
        return (
            <li ref='dropdown' className="am-dropdown" data-am-dropdown>
                <a className="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                    {this.props.title} <span className="am-icon-caret-down"></span>
                </a>
                <ul className="am-dropdown-content">

                    {this.props.data.map((item) => {

                        var className = item.className;

                        switch (item.type) {
                            case 'header':
                                className = 'am-dropdown-header'
                                break;
                            case 'divider':
                                className = 'am-divider'
                                break;
                        }

                        return (
                            <li className={className}>
                                {this.renderInnerNode(item)}
                            </li>
                        )

                    })}
                </ul>
            </li>
        )
    },

    renderInnerNode: function (item) {

        var type = item.type;

        if (type === 'header' || type === 'divider') {
            return item.text;
        } else {
            return (
                <a href={item.url}>{item.text}</a>
            )
        }
    }
})