/**
*
* ActionSheet
*
*/

import React, { PureComponent } from 'react';
import { Row, Col, Icon } from 'antd';


class ActionSheet extends PureComponent { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    visable: React.PropTypes.bool.isRequired,
    buttons: React.PropTypes.array.isRequired,
    onHidden: React.PropTypes.func.isRequired,
    onSearch: React.PropTypes.func.isRequired,
  };

  state = {
    visible: false,
    buttons: [],
    onHidden: () => {},
    onSearch: () => {},
  }

  constructor(props) {
    super(props);
  }

  handlePermission(button) {
    hasPermissionTo(button.subject, button.act, { category: button.category }, () =>{
      Turbolinks.visit(button.path)
    });
  }

  handleDisplay(props) {
    enableBodyMove(false)
    $(document).one('turbolinks:before-cache', ()=> { enableBodyMove(true) });
    this.setState({visible: true});
    $('#action-sheet-container').animateCSS('slideInUp')
    disableRefresh()
  }

  handleDestroy() {
    $('#action-sheet-container').animateCSS('slideOutDown', ()=> {
      this.setState({visible: false});
      enableBodyMove(true)
      this.props.onHidden && this.props.onHidden();
      enableRefresh(this.props.onSearch)
    });
  }

  componentWillReceiveProps(nextProps, prevProps) {
    if (nextProps.visible) {
      this.handDisplay(nextProps);
    }
  }

  render() {
    const buttonsLength = this.props.buttons.length;
    let rowCount = Math.ceil(buttonsLength / 4);
    if (buttonsLength % 4 === 0) {
      rowCount = buttonsLength / 4 + 1;
    }

    const offset = {
      height: rowCount * 121,
      top: this.state.visible? ($(window).height() - rowCount * 121) : '100%',
    };

    const results = [];
    const rows = _.range(0, rowCount);
    if (buttonsLength > 0) {
      rows.map((row) => {
        let cols = _.range(4 * row, 4 * row + 3);
        cols.map((col) => {
          let button = this.props.button[col];
          if (button) {
            results.push(<Col span="6" className="action-sheet-links">
              <a 
                className="action-sheet-link"
                href={button.need_permission? 'javascript:void(0);': button.path}
                onClick={button.need_permission? this.handlePermission.bind(this, button): null}>
                <div className={`svg-container with-opacity ${button.class}`}>
                  <svg>
                    <use xlinkHref={button.image}></use>
                  </svg>
                </div>
                <p className="ik-margin-top-10 ik-content-font ik-title-color">
                  {button.name}
                </p>
              </a>
            </Col>);
          }
        });

        if(row === (rows - 1)) {
          results.push(<Col span="6" offset={(18 - (buttonsLength % 4) * 6)} className="ik-padding-vertical-20">
            <div className="action-sheet-button" onClick={this.handleDestroy}>
              <Icon type="cross-circle" />
            </div>
          </Col>);
        }
      });
    }
    let rowfragment = null;
    if (buttonsLength > 0) {
      rowfragment = (<Row>{results}</Row>);
    }

    return (
      <Row>
        <Col 
          span="24" 
          id="action-sheet-cover"
          onClick={this.handleDestroy}
          style={this.state.visable ? {display:'block'} : {display:'none'}}></Col>
        <Col 
          span="24" 
          id="action-sheet-cover"
          style={offset}>
          {rowfragment}
        </Col>
      </Row>
    );
  }
}

export default ActionSheet;
