import React, { Component } from 'react';
import { Link } from 'react-router';
import { Grid } from '@icedesign/base';
import { join } from 'path';
import uppercamelcase from 'uppercamelcase';
import './List.scss';

const { Row, Col } = Grid;
const appRoutePrefix = window.routePrefix;

export default class List extends Component {
  static displayName = 'List';

  static defaultProps = {
    dataSource: [],
    type: 'block',
  };

  shouldComponentUpdate(nextProps) {
    return this.props.dataSource !== nextProps.dataSource;
  }

  renderItem = (item, idx) => {
    const { type, materialType } = this.props;
    if (!item) {
      return <div style={{ flex: 1 }} key={idx} />;
    }

    // xxs: 1, s:2, l: 4
    return (
      <Col
        xxs={24}
        xs={12}
        s={8}
        l={6}
        key={`${type}-${item.name}-order-${idx}`}
        data-spm={item.name}
      >
        <Link
          to={join(
            appRoutePrefix,
            type,
            item.name + (materialType ? '?type=' + materialType : '')
          )}
          className="block-item"
        >
          <div className="snapshoot">
            {item.isNewlyCreated ? (
              <div className="newly-created">NEW</div>
            ) : null}
            <img src={item.screenshot} />
          </div>
          <div className="item-intro">
            <p style={{ color: '#000', fontSize: '16px' }}>{item.title}</p>
            <p style={{ color: '#999', fontSize: '12px' }}>
              {uppercamelcase(item.name)}
            </p>
          </div>
        </Link>
      </Col>
    );
  };

  newCount = 0;
  renderItems = () => {
    const { dataSource } = this.props;

    return (
      <Row wrap gutter="20">
        {dataSource.map(this.renderItem)}
      </Row>
    );
  };

  renderLoading = () => {
    return <p className="no-data">正在加载中...</p>;
  };

  render() {
    const { dataSource, type } = this.props;
    return (
      <div className={`block-lists ${type}`}>
        {dataSource.length > 0 ? this.renderItems() : this.renderLoading()}
      </div>
    );
  }
}