import React, { Component, PropTypes } from 'react';
import { Tabs, Tab, List, Paper } from 'material-ui';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Spacing from 'material-ui/styles/spacing';
import UCdefaultTheme from '../../themes/DefaultTheme';
import SubjectListItem from './SubjectListItem';
import { formatSubjects } from './data';

export default class SubjectTabs extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }
  getChildContext() {
    const theme = getMuiTheme(UCdefaultTheme);
    theme.appBar.textColor = 'white';
    theme.appBar.spacing = Spacing.desktopSubheaderHeight;
    return {
      muiTheme: theme,
    };
  }

  handleChange = (value) => {
    this.setState({
      value,
    });
  };

  render() {
    const getLetters = this.state.value.split('').map(character => (
      <SubjectListItem character={character} key={character} subjects={formatSubjects(character)} />
    ));

    const getTabs = this.props.charGroups.map((group, counter) => (
      <Tab label={`${group.charAt(0)}-${group.charAt(group.length - 1)}`} value={group} key={counter}>
        <div>
          <Paper>
            <List>
              {getLetters}
            </List>
          </Paper>
        </div>
      </Tab>
    ));
    return (
      <Tabs value={this.state.value} onChange={this.handleChange} >
        {getTabs}
      </Tabs>
    );
  }
}

SubjectTabs.childContextTypes = {
  muiTheme: PropTypes.object,
};
SubjectTabs.propTypes = {
  charGroups: PropTypes.arrayOf(PropTypes.string),
};