/* eslint babel/new-cap: 0 */
import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { getVueMaterials, getReactMaterials } from '../../service/database';
import { Grid } from '@icedesign/base';
import Loading from '../../components/Loading';
import './ScaffoldList.less';

const { Row, Col } = Grid;

@withRouter
export default class ScaffoldContainer extends Component {
  static displayName = 'ScaffoldContainer';

  state = {
    scaffolds: null,
  };

  async componentDidMount() {
    const { type = 'react' } = this.props.location.query;
    const { scaffolds } = await (type === 'vue'
      ? getVueMaterials
      : getReactMaterials)();

    // eslint-disable-next-line
    this.setState({ scaffolds });
  }

  renderLoading = () => {
    return <Loading />;
  };

  renderScaffolds = (scaffolds) => {
    // const scaffoldOrderedList = [];
    // scaffolds.forEach((s, idx) => {
    //   Object.assign(s, additionalInformation[s.name] || {});
    //
    //   if (idx % 3 === 0) {
    //     scaffoldOrderedList.push([s]);
    //   } else {
    //     scaffoldOrderedList[scaffoldOrderedList.length - 1].push(s);
    //   }
    // });
    return (
      <Row wrap gutter="20" className="scaffold-list">
        {scaffolds.map((scaffold) => {
          const previewPage = scaffold.homepage;
          const LinkTag = previewPage ? 'a' : 'span';
          return (
            <Col
              xxs={24}
              s={12}
              l={8}
              key={scaffold.name}
              data-spm={scaffold.name}
            >
              <LinkTag
                className="scaffold-item-link"
                href={previewPage}
                target="_blank"
              >
                <div className="scaffold-item">
                  {scaffold.isNewlyCreated ? (
                    <div className="newly-created">NEW</div>
                  ) : null}
                  <img
                    src={scaffold.screenshot || scaffold.snapshot}
                    style={styles.scaffoldSnapshot}
                  />
                </div>
                <div className="scaffold-item-info">
                  <div className="scaffold-item-title">{scaffold.title}</div>
                  <div className="scaffold-item-desc">
                    {scaffold.description || '暂无描述'}
                  </div>
                </div>
              </LinkTag>
            </Col>
          );
        })}
      </Row>
    );
  };

  render() {
    const { scaffolds } = this.state;

    return (
      <div style={{ paddingTop: '10px' }}>
        {/* <h1 style={styles.title}>模板市场</h1> */}
        {scaffolds ? this.renderScaffolds(scaffolds) : this.renderLoading()}
      </div>
    );
  }
}

const styles = {
  title: {
    color: '#333',
    marginTop: '0',
    marginBottom: '20px',
  },
  snapshot: {
    height: '100%',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    backgroundSize: 'contain',
  },
  scaffoldSnapshot: {
    display: 'block',
    maxWidth: '100%',
    height: 'auto',
    borderRadius: '4px',
  },
};