import React from 'react';
import PropTypes from 'prop-types';

import ListItem from './List.Item';
import Collapsible from './Collapsible';

import '../base';
// import style from './ListItem.styl';

export default class ListItemCollapsible extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: props.open || false
    };

    this.toggleOpen = this.toggleOpen.bind(this);
    this.calculateHeight = this.calculateHeight.bind(this);
  }

  toggleOpen() {
    this.setState({ open: !this.state.open });
  }

  calculateHeight() {
    this.collapsible.calculateHeight();
  }

  render() {
    const { children, ...rest } = this.props;
    const { open } = this.state;

    const figure = <Collapsible.Icon open={open} />;
    const childs = React.Children.toArray(children);

    return (
      <div>
        <ListItem
          style={{ borderBottom: open ? 'solid 1px #dedede' : 'solid 1px #fff', transition: open ? 'border-color .01s ease-in' : 'border-color .01s ease-in .27s' }}
          figure={figure}
          clickable
          onClick={this.toggleOpen}
          {...rest}
        >
          {childs[0].props.children}
        </ListItem>
        <div>
          <Collapsible open={open} ref={(c) => { this.collapsible = c; }}>
            {childs[1]}
          </Collapsible>
        </div>
      </div>
    );
  }
}

ListItemCollapsible.propTypes = {
  children: PropTypes.node,
  error: PropTypes.bool,
  warning: PropTypes.bool,
  info: PropTypes.bool,
  success: PropTypes.bool
};

ListItemCollapsible.defaultProps = {
  children: undefined,
  error: undefined,
  warning: undefined,
  info: undefined,
  success: undefined
};