import React, { Component } from 'react';
import Markdown from '../../components/Markdown';
import axios from 'axios';
import './ICEWorksStart.less';

const styles = {
  container: {
    width: '800px',
    margin: '0 auto',
    background: '#fff',
    borderRadius: '8px',
    boxShadow: '0 0 45px rgba(66,66,66,0.2)',
    padding: '20px 50px',
  },
};

export default class extends Component {
  state = {
    markdown: '',
  };

  async componentDidMount() {
    const data = await axios.get(
      'https://g.alicdn.com/code/iceland/@icedesign/offline-data/0.0.19/db.json'
    );
    const markdown = data.data.docs.documentations[3].body;

    // eslint-disable-next-line
    this.setState(
      {
        markdown,
      },
      () => {
        // Prism
      }
    );
  }

  render() {
    const { markdown, title } = this.state;
    if (!markdown) {
      return <div style={styles.container}>稍等, 加载中...</div>;
    } else {
      return (
        <div className="markdown-body iceworks-start" style={styles.container}>
          <h1>ICEWORKS 快速上手</h1>
          <Markdown value={markdown} />
        </div>
      );
    }
  }
}