import React from 'react';
import { connect } from 'redux-bundler-react';
import { SidebarButton } from '../../application-controls/index';
import ChangeLogModal from './change-log-modal'

class ChangeLogButton extends React.Component {
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.openModalLog = this.openModalLog.bind(this);
  }

  openModalLog() {
    const { doModalOpen } = this.props;
    doModalOpen( {
      children: [ ChangeLogModal ],
      options: {}, 
      openedBy: 'ChangeLogButton'
    });
  }

  handleClick(){
    const { doGetChangeLogData } = this.props;
    this.openModalLog();
    doGetChangeLogData();
  }

  render() {
    return (
      <SidebarButton
        iconClass="mdi mdi-exclamation"
        label="Change Log"
        title="Change Log"
        onClick={ this.handleClick }
      />
    );
  }
}

export default connect(
  "doModalOpen",
  "doGetChangeLogData",
  ChangeLogButton
);