import React, { Component } from 'react';

import Button from 'grommet/components/Button';
import Header from 'grommet/components/Header';
import Heading from 'grommet/components/Heading';

import Responsive from 'grommet/utils/Responsive';

import { hrefExtractorHandler } from '../utils/qikshot';

export default class QikshotHeader extends Component {
  constructor () {
    super();
    this._onResponsive = this._onResponsive.bind(this);
    this.state = {
      hideButton: false
    };
  }

  componentDidMount () {
    this._responsive = Responsive.start(this._onResponsive);
  }

  componentWillUnmount () {
    this._responsive.stop();
  }

  _onResponsive (small) {
    this.setState({ hideButton: small });
  }

  render () {
    let buttonNode = (
      <Button primary={true} href="/qikshot" label="Take Quickshot"
        onClick={hrefExtractorHandler}/>
    );
    let tag = 'h2';
    let justify = 'between';
    if (this.state.hideButton) {
      tag = 'h3';
      justify = 'center';
      buttonNode = undefined;
    }
    return (
      <Header direction="row" large={true} pad={{horizontal: 'medium'}}
        fixed={true} justify={justify}>
        <Heading tag={tag} strong={true}>
          Qikshot
        </Heading>
        {buttonNode}
      </Header>
    );
  }
};

export default QikshotHeader;
