/* eslint babel/new-cap: 0 */
import React, { Component } from 'react';
import { withRouter, Link } from 'react-router';
import IceLoading from '@ali/ice-loading';
import List from '../BlockList/List';
import { getReactMaterials, getVueMaterials } from '../../service/database';
import './LayoutList.scss';

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

  state = {
    categories: [],
    loading: true,
  };

  async componentDidMount() {
    const { type = 'react' } = this.props.location.query;

    const { layouts } = await (type === 'vue'
      ? getVueMaterials
      : getReactMaterials)();

    // eslint-disable-next-line
    this.setState({
      layouts,
      loading: false,
    });
  }

  render() {
    let { layouts, loading } = this.state;
    const { type = 'react' } = this.props.location.query;

    if (loading) {
      return (
        <IceLoading
          type="ball-spin-fade-loader"
          color="#1B73FF"
          style={{
            margin: '0 auto',
          }}
        />
      );
    } else {
      return (
        <div className="blocks-content" style={{ paddingTop: '10px' }}>
          {/* <h1 style={styles.title}>布局市场</h1> */}
          <List type="layout" dataSource={layouts} materialType={type} />
        </div>
      );
    }
  }
}

const styles = {
  title: {
    color: '#333',
    marginTop: '0',
    marginBottom: '20px',
  },
};