import '../../../components/styles';
import '../index.less';
import { setWebviewBack } from '../../../../plugins/navbar';
import { PluginBase } from '../../PluginBase';
import { setFloatNavbar, SetNavbar, INavbarParam, INavbarResult, DisplayType } from '../../../../plugins/navbar';
import { iconWhiteBack, iconWhiteMessage, iconWhiteService, iconDarkBack, iconDarkService, iconDarkMessage, iconWhiteArrowDown, iconDarkArrowDown } from '../../../components/icons';
import { extend } from 'para-utils';
import Scrollbar from '../../../components/scrollbar';
import { getElemHeight } from '../../../components/scrollbar/lib/dom';

export class SetNavbarFloatbar extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>Webview头部标题栏浮动测试。</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>FloatNavbar滚动透明度渐变</div>
      </div>
    );
  }
  private webviewBack = () => {
    setWebviewBack();
  }
  private flag;
  private navbarParam: INavbarParam = {
    bgColor: '#ffffff',
    fontColor: '#ffffff',
    isStatusBarWhiteColor: 'true',
    left: {
      left: { type: DisplayType.Icon, value: iconWhiteBack },
      right: { type: DisplayType.Text, value: '返回' },
    },
    center: {
      left: { tagName: 'center_tag_click_left', type: DisplayType.Text, value: '我的订单' },
      right: { tagName: 'center_tag_click_right', type: DisplayType.Icon, value: iconWhiteArrowDown },
    },
    right: {
      left: { tagName: 'right_tag_click_left', type: DisplayType.Icon, value: iconWhiteService },
      right: { tagName: 'right_tag_click_right', type: DisplayType.Icon, value: iconWhiteMessage },
    },
  };
  private handleMove = (e) => {
    if (e.y > 0) { return; }
    const scrollY = -e.y;
    const move = Math.min(scrollY * 255 / 45, 255);
    console.log('move: ', move);
    if (move === 255 && !this.flag) {
      this.flag = true;
      this.floatNavbar.invokeBind(undefined, extend({}, this.navbarParam, {
        opacity: String(move),
        bgColor: '#ffffff',
        fontColor: '#000000',
        isStatusBarWhiteColor: 'false',
        left: { left: { type: DisplayType.Icon, value: iconDarkBack } },
        center: {
          left: { tagName: 'center_tag_click_left', type: DisplayType.Text, value: '我的订单' },
          right: { type: DisplayType.Icon, value: iconDarkArrowDown },
        },
        right: {
          left: { type: DisplayType.Icon, value: iconDarkService },
          right: { type: DisplayType.Icon, value: iconDarkMessage },
        },
      }));
    }
    if (move < 255) {
      this.flag = false;
      this.floatNavbar.invokeBind(undefined, extend({}, this.navbarParam, {
        opacity: String(move),
      }));
    }
  }
  private floatNavbar: SetNavbar<INavbarResult>;
  public componentDidMount() {
    // 设置默认的bar颜色和字体颜色, 注意Native,只能是#666666 不能是#666
    this.floatNavbar = setFloatNavbar(this.navbarParam);
    // 初始化绑定
    this.floatNavbar.invokeBind((err, data) => {
      if (err) {
        alert(JSON.stringify(err));
      } else {
        alert(JSON.stringify(data));
      }
    });
  }
  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.md`));
  }

  public render() {
    return (
      <Scrollbar options={{ bounce: false }} height={getElemHeight() + 'px'} onScroll={this.handleMove} onScrollEnd={this.handleMove}>
        <div className="plugin-page page-floatbar">
          <h2 className="left">{this.props.pluginName}</h2>
          <div className="short-desc">{this.getPluginShortDesc()}</div>
          <div className="full-desc">{this.getPluginFullDesc()}</div>
          <div className="body">
            <div className="play-body-item">
              <button onClick={this.webviewBack}>点击上一级</button>
              <button onClick={this.viewCode('navbar-float-opacity')}>查看代码</button>
            </div>
          </div>
          <div className="content-fill">
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
            <p>内容填充</p>
          </div>
        </div>
      </Scrollbar>
    );
  }
}