content: 'use strict';
  
  import R from 'ramda';
  import React from 'react';
  import SettingStore from '../../stores/SettingStore';
  import Comment from './Comment';
  import {List, Paper} from 'material-ui';
  
  const isNil = (obj) => obj != null;
  const ifSystemComment = (comment) => R.test(/^(\/(.*)){1}/, comment.get('text'));
  const No = (comment) => comment.getIn(['attr', 'no']);
  const Id = (comment) => comment.getIn(['attr', 'id']);
  const generateKey = (no, id) => {
    if (isNil(no) || isNil(id)) {
      return Math.random().toString(36).slice(-8);
    } else {
      return `${no}${id}`;
    }
  };
  const Key = (comment) => generateKey(No(comment), Id(comment));
  const Size = (components) => R.length(components);
  
  export default class CommentTable extends React.Component {
    static get propTypes() {
      return {
        comments: React.PropTypes.array.isRequired
      };
    }
  
    static get displayName() {
      return 'CommentTable';
    }
  
    constructor(props) {
      super(props);
      this.state = {
        systemComment: false,
        doTalking: false
      };
    }
  
    componentDidMount() {
      SettingStore.addChangeListener(this.onChangeOption);
    }
  
    componentWillUnMount() {
      SettingStore.addChangeListener(this.onChangeOption);
    }
  
    onChangeOption = () => {
      this.setState({
        systemComment: SettingStore.getOption().systemComment,
        doTalking: SettingStore.getOption().doTalking
      });
    }
  
    renderComments() {
      const ToSkip = R.and(! this.state.systemComment);
      let components = [];
      const renderComment = c => {
        if (ToSkip(ifSystemComment(c))) return;
        components.push(<Comment key={Key(c)} index={Size(components)} comment={c} />);
      };
      R.forEach(renderComment, this.props.comments);
      return components;
    }
  
    render() {
      return (
        <List
          className='CommentTableComponent'
          style={{
            marginTop: '64px',
            marginBottom: '64px',
            width: '100%',
            posision: 'relative',
            overflow: 'scroll'
          }}
        > <Paper className='CommentTableBody'>
            {this.renderComments()}
          </Paper>
        </List>
      );
    }
  }
  
  // vim:ft=javascript.jsx
  