import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as NavbarTogglerStore from '../store/NavbarToggler';

type NavbarTogglerProps = NavbarTogglerStore.NavbarState
    & typeof NavbarTogglerStore.actionCreators
    & RouteComponentProps<{}>;

export class NavbarToggler extends React.Component<NavbarTogglerProps, {}> {
    public render() {
        return <button className='navbar-toggler sidebar-toggler d-md-down-none' type='button' onClick={() => { this.props.toggleNav() }} >
            <span className='navbar-toggler-icon'></span>
            <span>{this.props.visible}</span>
        </button>;
    }
}

export default connect(
    (state: ApplicationState) => state.navbarToggler,
    NavbarTogglerStore.actionCreators
)(NavbarToggler) as typeof NavbarToggler;