import React from 'react';
import ReactDom from 'react-dom';
import Icon from '../index';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';
import './demo.scss';

export default function IconDemo() {
  const iconStyle = {
    fontSize: 36,
  };

  return (
    <Demo name="Icon" doc={<Doc />}>
      <DemoPanel title="所有Icon">
        <div className="icon-demo">
          <ul>
            <li><span>add</span><Icon type="add" /></li>
            <li><span>alert</span><Icon type="alert" /></li>
            <li><span>arrow-bottom</span><Icon type="arrow-bottom" /></li>
            <li><span>arrow-top</span><Icon type="arrow-top" /></li>
            <li><span>calendar</span><Icon type="calendar" /></li>
            <li><span>clone</span><Icon type="clone" /></li>
            <li><span>close</span><Icon type="close" /></li>
          </ul>
          <ul>
            <li><span>edit</span><Icon type="edit" className="icon-big" /></li>
            <li><span>group</span><Icon type="group" className="icon-big" /></li>
            <li><span>heart</span><Icon type="heart" className="icon-big" /></li>
            <li><span>home</span><Icon type="home" className="icon-big" /></li>
            <li><span>info</span><Icon type="info" className="icon-big" /></li>
            <li><span>insert</span><Icon type="insert" className="icon-big" /></li>
            <li><span>list-dot</span><Icon type="list-dot" className="icon-big" /></li>
          </ul>
          <ul>
            <li><span>comment</span><Icon type="comment" /></li>
            <li><span>course-data</span><Icon type="course-data" /></li>
            <li><span>course-live</span><Icon type="course-live" /></li>
            <li><span>course-q-a</span><Icon type="course-q-a" /></li>
            <li><span>course-record</span><Icon type="course-record" /></li>
            <li><span>delete</span><Icon type="delete" /></li>
            <li><span>download</span><Icon type="download" /></li>
          </ul>
          <ul>
            <li><span>logo</span><Icon type="logo" className="icon-big" /></li>
            <li><span>phone</span><Icon type="phone" className="icon-big" /></li>
            <li><span>play</span><Icon type="play" className="icon-big" /></li>
            <li><span>course-test</span><Icon type="course-test" className="icon-big" /></li>
            <li><span>qq-border</span><Icon type="qq-border" className="icon-big" /></li>
            <li><span>qq</span><Icon type="qq" className="icon-big" /></li>
            <li><span>qr-code</span><Icon type="qr-code" className="icon-big" /></li>
          </ul>
          <ul>
            <li><span>right</span><Icon type="right" style={iconStyle} /></li>
            <li><span>share</span><Icon type="share" style={iconStyle} /></li>
            <li><span>star-border</span><Icon type="star-border" style={iconStyle} /></li>
            <li><span>star</span><Icon type="star" style={iconStyle} /></li>
            <li><span>success</span><Icon type="success" style={iconStyle} /></li>
            <li><span>tel</span><Icon type="tel" style={iconStyle} /></li>
            <li><span>time</span><Icon type="time" style={iconStyle} /></li>
          </ul>
          <ul>
            <li><span>question</span><Icon type="question" style={iconStyle} /></li>
            <li><span>to-top</span><Icon type="to-top" style={iconStyle} /></li>
            <li><span>tupu</span><Icon type="tupu" style={iconStyle} /></li>
            <li><span>upload</span><Icon type="upload" style={iconStyle} /></li>
            <li><span>user-border</span><Icon type="user-border" style={iconStyle} /></li>
            <li><span>user-group-border</span><Icon type="user-group-border" style={iconStyle} /></li>
            <li><span>user-group</span><Icon type="user-group" style={iconStyle} /></li>
          </ul>
          <ul>
            <li><span>user</span><Icon type="user" style={iconStyle} /></li>
            <li><span>v-bottom</span><Icon type="v-bottom" style={iconStyle} /></li>
            <li><span>v-left</span><Icon type="v-left" style={iconStyle} /></li>
            <li><span>v-right</span><Icon type="v-right" style={iconStyle} /></li>
            <li><span>v-top</span><Icon type="v-top" style={iconStyle} /></li>
            <li><span>weixin-border</span><Icon type="weixin-border" style={iconStyle} /></li>
            <li><span>weixin</span><Icon type="weixin" style={iconStyle} /></li>
          </ul>
          <ul>
            <li><span>record-border</span><Icon type="record-border" style={iconStyle} /></li>
            <li><span>test-border</span><Icon type="test-border" style={iconStyle} /></li>
            <li><span>data-border</span><Icon type="data-border" style={iconStyle} /></li>
            <li><span>record-border</span><Icon type="record-border" style={iconStyle} /></li>
            <li><span>live-border</span><Icon type="live-border" style={iconStyle} /></li>
            <li><span>place-top</span><Icon type="place-top" style={iconStyle} /></li>
            <li><span>calendar-2</span><Icon type="calendar-2" style={iconStyle} /></li>
          </ul>
          <ul>
            <li><span>replay-simple</span><Icon type="replay-simple" style={iconStyle} /></li>
            <li><span>tick</span><Icon type="tick" style={iconStyle} /></li>
            <li><span>dropdown</span><Icon type="dropdown" style={iconStyle} /></li>
            <li><span>d-right</span><Icon type="d-right" style={iconStyle} /></li>
            <li><span>layout-v</span><Icon type="layout-v" style={iconStyle} /></li>
            <li><span>layout-h</span><Icon type="layout-h" style={iconStyle} /></li>
            <li><span>v-right-bold</span><Icon type="v-right-bold" style={iconStyle} /></li>
            <li><span>play-circle</span><Icon type="play-circle" style={iconStyle} /></li>
          </ul>
          <ul>
            <li><span>loading</span><Icon type="loading" style={{
              marginLeft: '48px',
              marginTop: '10px',
            }} /></li>
          </ul>
        </div>
      </DemoPanel>
    </Demo>
  );
}


const demo = document.getElementById('demo');

if (demo) {
  ReactDom.render(<IconDemo />, demo);
}