import React from 'react/addons';

import WikiActions from './WikiActions.jsx';
import util from '../utils/util.jsx';

var FileNode = React.createClass({

    handleToggleExpandingStatus() {
        WikiActions.toggleExpandingStatus(this.props.node);
    },

    handleTitleContentClicked() {
        WikiActions.selectFileNode(this.props.node);
    },

    render() {
        var node = this.props.node;
        var name = node.name;

        var children = <FileTree node={node}
                                 level={this.props.level + 1}/>;

        var levelClassName = util.generateClassName({
            level: 1,
            'no-child': !(node.children && node.children.length)
        });

        var titleClassName = util.generateClassName({
            title: 1,
            'selected': !!node.selected
        });

        var titleContentClassName = util.generateClassName({
            'title-content': 1,
            disabled: !node.index
        });

        return <div className={levelClassName} data-level={this.props.level}
                    data-expanding-status={node.expanded ? 'expanded' : 'collapsed'}>
            <div className={titleClassName}
                 data-url={node.isFile ? node.dirpath + '/' + node.index
                    : node.isRoot ? node.index
                        : node.path + '/' + node.index}
                 >
                <span className='expanding-status'
                      onClick={this.handleToggleExpandingStatus}>
                    <span className='fa icon-down fa-caret-down'></span>
                    <span className='fa icon-right fa-caret-right'></span>
                    <span className='fa icon-none fa-circle'></span>
                </span>
                <span className={titleContentClassName}
                    onClick={this.handleTitleContentClicked}>
                    {name}
                </span>
                <span className='read-status fa fa-check'></span>
            </div>
            {children}
        </div>
    }
});

var FileTree = React.createClass({


    render() {
        if (this.props.node.children) {
            var nodes = this.props.node.children.map(
                    node => {
                    if (typeof node === 'string') {
                        var fileNode = {
                            name: node.replace(/\.md$/, ''),
                            dirpath: this.props.node.path,
                            path: this.props.node.path + '/' + node,
                            index: node
                        };
                        return <FileNode node={fileNode}
                                         level={this.props.level}/>
                    } else {
                        return <FileNode node={node}
                                         level={this.props.level}/>
                    }
                }
            );
        } else {
            nodes = [];
        }

        //console.log(nodes);

        return <div className='children'>
            {nodes}
        </div>;
    }
});

export default FileNode;