import React from 'react';
import Loadable from 'react-loadable';

import './WeaPlugin.less';

const loadable = (loader, loading = () => null) => Loadable({ loader, loading });
const WeaPlugin = loadable(() => import('./WeaPlugin'));

class Index extends React.Component {
  constructor(props) {
    super(props);
    const { location = {}, visible = false } = props;
    const { query = {} } = location;
    const { display = '' } = query;
    this.state = { display, visible };
  }

  render() {
    const { display, visible, style } = this.state;
    return display == 'page' || visible ? <WeaPlugin ecId={`${this && this.props && this.props.ecId || ''}_WeaPlugin@omh03k`} {...this.props} display={display} visible={visible} style={style} onShow={this.onShow} /> : null;
  }

  onShow = (visible = true, style = {}) => {
    this.setState({ visible, style });
  };

  onHide = () => {
    this.setState({ visible: false });
  };
}

export default Index;