/*
* @Author: zhouningyi
* @Date: 2016-12-27 15:52:11
*/

import React, { Component, PropTypes } from 'react';
import UiBase from './../uiBase';
import './index.css';
import {fade} from 'material-ui/utils/colorManipulator';
import Subheader from 'material-ui/Subheader';

export function getStyles(props, context) {
  const { palette } = context.muiTheme;
  const { alternateTextColor, accent3Color } = palette;
  return {
    main: {
      normal: {
        background: alternateTextColor,
      },
      hover: {
        background: fade(alternateTextColor, 0.05),
      }
    }
  };
}

const getv = (v1, v2) => {
  if (v1 !== null && v1 !== undefined) return v1;
  if (v2 !== null && v2 !== undefined) return v2;
}

export default class Group extends UiBase {
  static propTypes = {
    data:       PropTypes.any.isRequired,
    onChange:   PropTypes.func.isRequired,
    onFinishChange: PropTypes.func,
    children:   PropTypes.any,
  }

  constructor(props: any) {
    super(props);
    this.state = {
      showContent: getv(this.props.data.expand, this.props.expand),
      contentHeight: null,
    };
  }

  componentDidMount() {
    this.setState({
      contentHeight: this.content.clientHeight,
    });
  }

  _genStatusIcon(){
    const {showContent} = this.state;
    const className = showContent ? 'z_group-icon-show' : 'z_group-icon-hide';
    return (
      <div className={className}>
        ▼
      </div>
    );
  }

  //TODO: add pending to child group
  render() {
    const {name} = this.props.data;
    const height = this._getDefaultHeight();
    const shStyle = {
      lineHeight: `${25}px`, 
      fontSize: 12,
      flexGrow: 11,
      width: 'auto',
      paddingLeft: 0,
      userSelect: 'none'
    };
    const depthStyle = this._getDepthStyle();
    const shrinkText = this.state.showContent ? '' : ' … ';
    const style = getStyles(this.props, this.context);
    const {main}   = style;
    const bgStyle  = this.state.isActive ? Object.assign({}, main.normal, main.hover): main.normal;
    const endStyle = {maxWidth: `${height}px`, minWidth: `${height}px`};
    return (
      <div className="z_group-container">

        <div
          onClick={e => {this.setState({showContent: !this.state.showContent})}}
          className="z_group-line-container"
          style={bgStyle}
          onMouseOver={this.onMouseOver}
          onMouseOut={this.onMouseOut}
        >
          <div style={depthStyle} className="z_group-depth">
            {this._genStatusIcon()}
          </div>
          <Subheader style={shStyle}>{ name + shrinkText }</Subheader>
          <div className="z_group-end" style={endStyle}/>
        </div>

        <div
          ref={ref => {this.content = ref}}
          className="z_group-content"
          style={{
            maxHeight: this.state.contentHeight || null 
          }}
        >
          <div className="z_group-content-container">
            {this.state.showContent ? this.props.children : null}
          </div>
        </div>
        
      </div>
    );
  }
};