import React, { Component } from 'react';
import PropTypes from 'prop-types';
// import { PureRenderMixin } from 'amos-core';
import { Log, omit } from 'amos-tool';
import { WidthProvider, Responsive } from 'react-grid-layout';

import layoutConsts from './../../../../consts/layoutConsts';

import CardPanel from './CardPanel';
import AddCardPanel from './../AddCardPanel';

const ResponsiveReactGridLayout = WidthProvider(Responsive);

class CenterGraph extends Component {

  static propTypes = {
    cardPanelDataMap: PropTypes.any,
    onPanelLayoutChange: PropTypes.func
  };

  static defaultProps = {
    cardPanelDataMap: [],
    className: 'layout',
    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
    rowHeight: layoutConsts.rowHeight,
    onPanelLayoutChange(){}
  };

  constructor(props) {
    super(props);
    this.state = {

    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    // return PureRenderMixin.shouldComponentUpdate.call(this, nextProps, nextState);
    return true;
  }

  // We're using the cols coming back from this to calculate where to add new items.
  onBreakpointChange = (breakpoint, cols) => {
    Log.info('breakpoint', breakpoint);
    this.setState({
      breakpoint,
      cols
    });
  }

  onLayoutChange = (layout) => {
    this.setState({ layout });
    if (this.props.onPanelLayoutChange) {
      this.props.onPanelLayoutChange(layout);
    }
  }

  /**
   * 创建一个card frame
   *
   * @memberof CenterGraph
   */
  createTrigerPanel = (options) => {

    const { uid, panelDataGrid, cardOptions = {} } = options;

    return (
      <div key={uid} data-grid={panelDataGrid} className="card-item-layout">
        {
          cardOptions.isAddFrame ? <AddCardPanel /> : <CardPanel cardOptions={cardOptions} panelUID={uid} />
        }
      </div>
    );
  }

  render() {
    const { cardPanelDataMap, ...rest } = this.props;
    const cardPanelDataArray = [...cardPanelDataMap.values()];

    const otherProps = omit(
      rest,
      ['onPanelLayoutChange']
    );
    return (
      <div className="scene-graph-card-layout">
        <ResponsiveReactGridLayout
          onLayoutChange={this.onLayoutChange}
          onBreakpointChange={this.onBreakpointChange}
          {...otherProps}
        >
          {
            cardPanelDataArray.map(item => this.createTrigerPanel(item))
          }
        </ResponsiveReactGridLayout>
      </div>
    );
  }
}

export default CenterGraph;
