import React, { Component } from 'react';
import { Tabs, Toolbar, Button, Divider } from '@redux-devtools/ui';
import { connect } from 'react-redux';
import { GoBook } from 'react-icons/go';
import { IoMdText } from 'react-icons/io';
import { TiSocialTwitter } from 'react-icons/ti';
import { TiHeartFullOutline } from 'react-icons/ti';
import { changeSection } from '../actions';
const tabs = [{
  name: 'Actions'
}, {
  name: 'Settings'
}];
class Header extends Component {
  openLink = url => () => {
    window.open(url);
  };
  render() {
    return /*#__PURE__*/React.createElement(Toolbar, {
      compact: true,
      noBorder: true,
      borderPosition: "bottom"
    }, /*#__PURE__*/React.createElement(Tabs, {
      main: true,
      collapsible: true,
      tabs: tabs,
      onClick: this.props.changeSection,
      selected: this.props.section || 'Actions'
    }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Button, {
      title: "Documentation",
      tooltipPosition: "bottom",
      onClick: this.openLink('https://github.com/reduxjs/redux-devtools/blob/main/README.md')
    }, /*#__PURE__*/React.createElement(GoBook, null)), /*#__PURE__*/React.createElement(Button, {
      title: "Feedback",
      tooltipPosition: "bottom",
      onClick: this.openLink('https://github.com/reduxjs/redux-devtools/discussions')
    }, /*#__PURE__*/React.createElement(IoMdText, null)), /*#__PURE__*/React.createElement(Button, {
      title: "Follow us",
      tooltipPosition: "bottom",
      onClick: this.openLink('https://twitter.com/NathanBierema')
    }, /*#__PURE__*/React.createElement(TiSocialTwitter, null)), /*#__PURE__*/React.createElement(Button, {
      title: "Support us",
      tooltipPosition: "bottom-left",
      onClick: this.openLink('https://opencollective.com/redux-devtools-extension')
    }, /*#__PURE__*/React.createElement(TiHeartFullOutline, null)));
  }
}
const actionCreators = {
  changeSection
};
export default connect(null, actionCreators)(Header);