import { PluginBase } from '../PluginBase';
import { Dialog } from '../../components/modal/Dialog';

export class NtvLoginDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>URL协议ntv_login</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>http://domain.com?ntv_login#/home</div>
      </div>
    );
  }

  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.md`));
  }

  public state = {
    random: Math.random(),
  };
  private urlRefresh = () => {
    const hash = window.location.hash.replace('#', '');
    window.location.href = this.getHostUrl(hash, {
      r: this.state.random,
    });
  }
  private urlForceLogin = () => {
    this.setState({
      random: Math.random(),
    }, () => {
      const hash = window.location.hash.replace('#', '');
      const redirect = this.getHostUrl(hash, {
        ntv_login: '',
        r: this.state.random,
      });
      Dialog.confirm({
        children: <div>{redirect}</div>,
        onRight: () => {
          window.location.href = redirect;
        },
      }, true);
    });
  }

  public render() {
    return (
      <div className="plugin-page">
        <h2 className="left">{this.props.pluginName}</h2>
        <div className="short-desc">{this.getPluginShortDesc()}</div>
        <div className="full-desc">{this.getPluginFullDesc()}</div>
        <p><strong>当前随机数</strong>:{this.state.random}</p>
        <div className="body">
          <div className="play-body-item">
            <button className="exec" onClick={this.urlRefresh}>当前窗口直接跳转</button>
            <button className="view" onClick={this.viewCode('ntv-login')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.urlForceLogin}>强制登陆再跳转</button>
            <button className="view" onClick={this.viewCode('ntv-login')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}