import React from 'react';
import PropTypes from 'prop-types';
// import MobileTearSheet from '../../../MobileTearSheet';
import {List, ListItem, makeSelectable} from 'material-ui/List';
import Avatar from 'material-ui/Avatar';
import Subheader from 'material-ui/Subheader';

let SelectableList = makeSelectable(List);

function wrapState(ComposedComponent) {
  return class SelectableList extends React.Component {
    static propTypes = {
      children: PropTypes.node.isRequired,
      defaultValue: PropTypes.number.isRequired,
    };

    componentWillMount() {
      this.setState({
        selectedIndex: this.props.defaultValue,
      });
    }

    handleRequestChange = (event, index) => {
      this.setState({
        selectedIndex: index,
      });
    };

    render() {
      return (
        <ComposedComponent
          value={this.state.selectedIndex}
          onChange={this.handleRequestChange}
                >
          {this.props.children}
        </ComposedComponent>
      );
    }
  };
}

SelectableList = wrapState(SelectableList);


const ListExampleSelectable = () => (
  <section className="box box-default">
    <div className="box-header">Selectable list</div>
    <div className="box-body">
      <SelectableList defaultValue={3}>
        <Subheader>Selectable Contacts</Subheader>
        <ListItem
          value={1}
          primaryText="Brendan Lim"
          leftAvatar={<Avatar src="assets/images-demo/avatars/ok-128.jpg" />}
          nestedItems={[
            <ListItem
              value={2}
              primaryText="Grace Ng"
              leftAvatar={<Avatar src="assets/images-demo/avatars/uxceo-128.jpg" />}
            />,
          ]}
        />
        <ListItem
          value={3}
          primaryText="Kerem Suer"
          leftAvatar={<Avatar src="assets/images-demo/avatars/kerem-128.jpg" />}
        />
        <ListItem
          value={4}
          primaryText="Eric Hoffman"
          leftAvatar={<Avatar src="assets/images-demo/avatars/kolage-128.jpg" />}
        />
        <ListItem
          value={5}
          primaryText="Raquel Parrado"
          leftAvatar={<Avatar src="assets/images-demo/avatars/raquelromanp-128.jpg" />}
        />
      </SelectableList>
    </div>
  </section>
);

export default ListExampleSelectable;
