import React, { Component } from 'react';
import classnames from 'classnames';
import { Icon } from '@icedesign/base';
import { withRouter } from 'react-router';
import PlaygroundPreview from '../PlaygroundPreview';
import Markdown from '../Markdown';
import prism from '../../vendors/prism';
import { isAlibaba } from '../../utils';
import './DemoBox.scss';

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

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      isExpand: true,
    };
  }

  toggleSourceCode = () => {
    this.setState({
      isExpand: !this.state.isExpand,
    });
  };

  // 跳到 playground
  transferToPlayground = () => {
    const localStorage = window.localStorage;
    const TRANSFER_KEY = 'ice:demo-box-transfer-to-playground';
    const { dataSource } = this.props;
    const { css, title } = dataSource || {};
    const payload = {
      jsx: this.getJsx() || '',
      scss: css || '',
      title: '在线预览：' + title,
    };
    localStorage.setItem(TRANSFER_KEY, JSON.stringify(payload));
    this.props.router.push(
      isAlibaba ? '/playground/new?from=demo' : '/ice/playground?from=demo'
    );
  };

  getJsx = () => {
    const { dataSource } = this.props;
    return isAlibaba
      ? dataSource.jsx.split('@icedesign/base').join('@alife/next')
      : dataSource.jsx;
  };

  render() {
    const { dataSource } = this.props;
    if (!dataSource.scss) {
      dataSource.scss = dataSource.css;
    }
    return (
      <div className="code-box">
        <div className="code-box-title">
          <span>
            <Icon type="pin" /> {dataSource.title}
          </span>
        </div>
        <div className="code-box-meta">
          <Markdown value={dataSource.body} />
        </div>
        <div className="code-box-demo">
          <PlaygroundPreview dataSource={dataSource} mode="context" />
        </div>
        <p className="code-action">
          <span className="collaps" onClick={this.toggleSourceCode}>
            查看源码
          </span>
          <span
            className="collaps"
            style={{ marginLeft: '15px' }}
            onClick={this.transferToPlayground}
          >
            在线预览
          </span>
        </p>
        <section
          className={classnames({
            'highlight-wrapper': true,
            'highlight-wrapper-expand': this.state.isExpand,
            'markdown-body': true,
          })}
        >
          <pre>
            <code
              dangerouslySetInnerHTML={{
                __html: prism.highlight(
                  this.getJsx(),
                  prism.languages.javascript
                ),
              }}
            />
          </pre>
          {dataSource.css ? (
            <pre>
              <code
                dangerouslySetInnerHTML={{
                  __html: prism.highlight(dataSource.css, prism.languages.css),
                }}
              />
            </pre>
          ) : null}
        </section>
      </div>
    );
  }
}