import React, {PropTypes} from 'react'
import ReactTooltip from 'react-tooltip'

import TimeRangeDropdown from 'shared/components/TimeRangeDropdown'

const DashboardHeader = ({
  children,
  buttonText,
  headerText,
  timeRange,
  isHidden,
  handleChooseTimeRange,
  handleClickPresentationButton,
}) => isHidden ? null : (
  <div className="page-header full-width">
    <div className="page-header__container">
      <div className="page-header__left">
        {buttonText &&
          <div className="dropdown page-header-dropdown">
            <button className="dropdown-toggle" type="button" data-toggle="dropdown">
              <span className="button-text">{buttonText}</span>
              <span className="caret"></span>
            </button>
            <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
              {children}
            </ul>
          </div>
        }
        {headerText &&
          <h1>Kubernetes Dashboard</h1>
        }
      </div>
      <div className="page-header__right">
        <div className="btn btn-info btn-sm" data-for="graph-tips-tooltip" data-tip="<p><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>">
          <span className="icon heart"></span>
          Graph Tips
        </div>
        <ReactTooltip id="graph-tips-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip place-bottom" />
        <TimeRangeDropdown onChooseTimeRange={handleChooseTimeRange} selected={timeRange.inputValue} />
        <div className="btn btn-sm btn-info" onClick={handleClickPresentationButton}>
          <span className="icon keynote" style={{margin: 0}}></span>
        </div>
      </div>
    </div>
  </div>
)

const {
  shape,
  array,
  string,
  func,
  bool,
} = PropTypes

DashboardHeader.propTypes = {
  children: array,
  buttonText: string,
  headerText: string,
  timeRange: shape({}).isRequired,
  isHidden: bool.isRequired,
  handleChooseTimeRange: func.isRequired,
  handleClickPresentationButton: func.isRequired,
}

export default DashboardHeader

@@ -72,16 +72,51 @@
 tooltip'
+%0Aimport %7BLink%7D from 'react-router';
 %0A%0Aimport
@@ -231,16 +231,29 @@
 onText,%0A
+  dashboard,%0A
   header
@@ -341,16 +341,28 @@
 Button,%0A
+  sourceID,%0A
 %7D) =%3E is
@@ -1078,24 +1078,306 @@
 er__right%22%3E%0A
+        %7BsourceID ?%0A          %3Cdiv className=%22btn btn-sm btn-info%22%3E%0A            %3CLink to=%7B%60/sources/$%7BsourceID%7D/dashboards/$%7Bdashboard && dashboard.id%7D/edit%60%7D %3E%0A              %3Cspan className=%22icon pencil%22 style=%7B%7Bmargin: 0%7D%7D /%3E%0A            %3C/Link%3E%0A          %3C/div%3E : null%0A        %7D%0A
         %3Cdiv
@@ -2237,16 +2237,36 @@
 pes = %7B%0A
+  sourceID: string,%0A
   childr
@@ -2298,16 +2298,40 @@
 string,%0A
+  dashboard: shape(%7B%7D),%0A
   header

Add edit button to DashboardHeader