import React, { Component } from 'react';
import PropTypes from 'prop-types';
import RayMediaquery from 'ray-mediaquery';
import { sysName } from './../../../consts/urlConsts';
import SysExtend from './SysExtend';

class Header extends Component {
  static propTypes = {
    extendSystem: PropTypes.array
  };

  constructor(props) {
    super(props);
    this.state = {
      showText: true

    };
  }

  componentDidMount() {
    RayMediaquery.register('only screen and (min-width: 0) and (max-width: 992px)', {
      match: () => {
        this.setState({ showText: false });
      },
      unmatch: () => {
        this.setState({ showText: true });
      }
    });
  }

  render() {
    const { showText } = this.state;
    const { extendSystem } = this.props;
    let name = sysName;
    return (
      <div className="header-row">
        <div className="header-primary">
        <div className="logo">
      <div className="logo-text">{name}</div>
    </div>
          <SysExtend showText={showText} extendSystem={extendSystem} {...this.props} />
        </div>
      </div>
    );
  }
}

Header.propTypes = {
  extendSystem: PropTypes.array
};

export default Header;
