import { Component } from 'inferno';
import 'highlight.js/styles/tomorrow.css';
import PerfectScrollbar from 'perfect-scrollbar';
import 'perfect-scrollbar/css/perfect-scrollbar.css';
import { BottomModal } from '../components/modal/BottomModal';
import copy from 'copy-to-clipboard';
import { Toast } from '../components/modal/Toast';
import { modifyQueryString } from 'para-utils';

export abstract class PluginBase extends Component<any, any>{
  public abstract getPluginShortDesc(): JSX.Element;
  public abstract getPluginFullDesc(): JSX.Element;

  public getHostUrl(hash, param = {}) {
    let baseUrl = location.origin + location.pathname;
    baseUrl = modifyQueryString(baseUrl, param);
    return `${baseUrl}#${hash}`;
  }

  private showMessage = () => {
    const message = Toast.open({
      text: '复制成功',
    });
    setTimeout(() => {
      message.close();
    }, 2000);
  }

  private copyCode = (code) => () => {
    copy(code);
    this.showMessage();
  }

  private modalRef;
  private setRef = (node) => {
    this.modalRef = node;
  }

  private handleAfterOpen = () => {
    const leftElementPs = new PerfectScrollbar(this.modalRef, {
      wheelPropagation: false,
    });
  }

  public showMarkdownPopup(mdContent) {
    const highlightedCode = mdContent.split('|code|')[0] + '</code></pre>';
    const code = mdContent.split('|code|')[1].replace('</code></pre>', '');
    return BottomModal.open({
      closeByMask: true,
      onAfterOpen: this.handleAfterOpen,
      children: (
        <div className="pupup-dialog">
          <div className="scroll-content" ref={this.setRef}>
            <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />
          </div>
          <div className="copy-wrap"><div className="copy" onClick={this.copyCode(code)}>复制代码</div></div>
        </div>
      ),
    });
  }

  public setPageSpinner(status) {
    const $spinner = document.getElementById('global-spinner');
    if (!$spinner) { return; }
    if (status && !$spinner.clientWidth) {
      return $spinner.classList.remove('hide');
    }
    if (!status && $spinner.clientWidth) {
      return $spinner.classList.add('hide');
    }
  }
}