import React, { PropTypes } from 'react';
import FontIcon from 'react-toolbox/lib/font_icon';
import Input from 'react-toolbox/lib/input';
import {Button} from 'react-toolbox/lib/button';
import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider, ListItemText, ListItemContent } from 'react-toolbox/lib/list';
 
import { Accordion, Chord } from 'react-toolbox-additions/lib/accordion';
import style from '../style';
 
class AccordionTest extends React.Component {
 
  static propTypes = {
  };
 
  static defaultProps = {
  }
 
  state = {
    index: 0
  }
 
  onChange = (idx) => {
    this.setState({
      index: idx
    });
  }
 
  onActive1 = () => {
    console.info('Selected chord: ' + this.state.index);
  }
 
  onActive2 = () => {
    console.info('Selected chord: ' + this.state.index);
  }
 
  onActive3 = () => {
    console.info('Selected chord: ' + this.state.index);
  }
 
  render () {
 
    return (
      <Accordion
        className={style.accordion}
        index={this.state.index}
        onChange={this.onChange}
      >
        <Chord
          label='Number One'
          onActive={this.onActive1}
        >
          <div className={style['accordion-body2']}>
            The project provides additions for react-toolbox which are not defined at material design and therefore were not included to original react-toolbox components library but it could be useful to have.
          </div>
        </Chord>
        <Chord
          labelIcon={<FontIcon value='build' />}
          label='Number Two'
          onActive={this.onActive2}
        >
          <div className={style['accordion-body1']} >
            <Input
              type='number'
              value={1000}
              label='Number'
            />
 
            <Button
              label='Click Me'
            />
          </div>
 
        </Chord>
        <Chord
          labelIcon={'view_list'}
          label='Number Three'
          labelPostIcon={this.state.index1 === 2 ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
          onActive={this.onActive3}
        >
          <List selectable ripple>
            <ListSubHeader caption='Contacts' />
            <ListItem caption='Inbox' leftIcon='inbox' />
            <ListItem caption='Outbox' selectable={false} ripple={false} leftIcon='send' />
            <ListItem caption='Trash' leftIcon='delete' />
            <ListItem caption='Spam' leftIcon='report' />
          </List>
        </Chord>
      </Accordion>
    );
  }
}