import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { PubSub } from 'ray-eventpool';
import Icon from 'amos-icon';
import { CardFrame, CardItem } from 'amos-framework';
import { ON_CARDFRAME_REMOVE } from './../../../../consts/topicConsts';

class CardPanel extends Component {

  static propTypes = {
    cardOptions: PropTypes.object,
    panelUID: PropTypes.string,
    removeCardFrame: PropTypes.func
  };

  static defaultProps = {
    cardOptions: {},
    removeCardFrame(){}
  };

  removeCardFrame = (panelUID) => {
    PubSub.publish(ON_CARDFRAME_REMOVE, panelUID);
  }

  renderOperate = () => {
    const { panelUID, cardOptions } = this.props;
    let closable = cardOptions.closable;
    closable = closable === undefined ? true : closable;
    return (
      <div>
        {closable && <Icon icon="cross" onClick={() => this.removeCardFrame(panelUID)} />}
      </div>
    );
  }

  renderContent = () => {
    const { cardOptions } = this.props;
    const datas = cardOptions.data || [];
    return datas.map(co =>{
      const { key, ...rest } = co;
      return (
        <CardItem
          key={key}
          {...rest}
        />
      );
    });
  }

  render() {
    const { cardOptions } = this.props;
    const title = cardOptions.title;

    const operate = this.renderOperate();
    const content = this.renderContent();
    return (
      <CardFrame operate={operate} content={content} title={title} />
    );
  }
}

export default CardPanel;
