import { PluginBase } from "../PluginBase";
import { globalBridge } from './manifest';
import { extend } from 'para-utils';
import './index.less';
import '../../components/styles';
import { openNewUrl } from "../../../plugins/web";

export class Home extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return <div />;
  }
  public getPluginFullDesc(): JSX.Element {
    return <div />;
  }

  public state = {
    groups: {
      'Native fcfclient://': [],
      'H5 URL参数协议': [],
    } as any,
    hasMethods: true as boolean,
  }

  public componentDidMount() {
    const bridges = globalBridge();
    this.setState({
      groups: extend(this.state.groups, bridges),
      hasMethods: Object.keys(bridges).length
    });
  }

  private redirectTo = (pluginName, method) => {
    if (pluginName === 'Native fcfclient://') {
      if (method === 'fcfclient://main/web') {
        window.location.href = method;
        return;
      }
      openNewUrl(`${method}`);
    } else if (pluginName === 'H5 URL参数协议') {
      openNewUrl(this.getHostUrl(`${method}`));
    } else {
      openNewUrl(this.getHostUrl(`${pluginName}_${method}`.replace('√', '')));
    }

  }

  private getMethodName = (pluginName) => {
    const methods = this.state.groups[pluginName];
    const result: any = [];
    for (const method of methods) {
      result.push(<li onClick={this.redirectTo.bind(this, pluginName, method)}>{method}</li>)
    }
    if (pluginName === 'Native fcfclient://') {
      result.push(<li onClick={this.redirectTo.bind(this, pluginName, 'fcfclient://main/qrcode')}>{'fcfclient://main/qrcode'}</li>);
      result.push(<li onClick={this.redirectTo.bind(this, pluginName, 'fcfclient://main/homepage')}>{'fcfclient://main/homepage'}</li>);
      result.push(<li onClick={this.redirectTo.bind(this, pluginName, 'fcfclient://main/settings')}>{'fcfclient://main/settings'}</li>);
      result.push(<li onClick={this.redirectTo.bind(this, pluginName, 'fcfclient://main/web')}>{'fcfclient://main/web(不带参数，打开首页)'}</li>);
    } else if (pluginName === 'H5 URL参数协议') {
      result.push(<li onClick={this.redirectTo.bind(this, pluginName, 'plugin_schema_ntv_login')}>{'?ntv_login'}</li>);
      result.push(<li onClick={this.redirectTo.bind(this, pluginName, 'plugin_schema_ntv_webview_new')}>{'?ntv_webview_new'}</li>);
      result.push(<li onClick={this.redirectTo.bind(this, pluginName, 'plugin_schema_ntv_bottom_side')}>{'?ntv_bottom_side'}</li>);
      result.push(<li onClick={this.redirectTo.bind(this, pluginName, 'plugin_schema_ntv_webview_history')}>{'?ntv_webview_history'}</li>);
      result.push(<li onClick={this.redirectTo.bind(this, pluginName, 'plugin_schema_ntv_launch_main_web')}>{'fcfclient://main/web?'}</li>);
    }
    return result;
  }

  public render() {
    const { groups, hasMethods } = this.state;
    const pluginNames = Object.keys(groups);
    return (
      <div class="layout">
        <h2>混合插件列表页</h2>
        {!hasMethods && <h4 className="center">请在手机WEBVIEW环境中打开！</h4>}
        {
          pluginNames.map((pluginName) => {
            return (<div>
              <div className="bridge-category">{pluginName}</div>
              <div className="bridge-methods">
                <ul>
                  {this.getMethodName(pluginName)}
                </ul>
              </div>
            </div>);
          })
        }
      </div>
    );
  }
}