import React, { Component, PropTypes } from 'react';
import { ListItem } from 'material-ui';

export default class SubjectListItem extends Component {
  constructor(args) {
    super(args);
    this.state = {
      open: false,
    };
  }

  handleNestedListToggle = (item) => {
    this.setState({
      open: item.state.open,
    });
  };

  render() {
    const getSubjects = () => (
      this.props.subjects.map(subject => (
        <ListItem
          primaryText={subject.shortName}
          key={subject.shortName}
          secondaryText={subject.longName}
        />
      ))
    );

    return (
      <ListItem
        key={this.props.character}
        primaryText={this.props.character}
        nestedItems={getSubjects(this.props.character)}
        open={this.state.open}
        onNestedListToggle={this.handleNestedListToggle}
        primaryTogglesNestedList
      />
    );
  }
}

SubjectListItem.propTypes = {
  character: PropTypes.string,
  subjects: PropTypes.arrayOf(PropTypes.object),
};