import React from 'react';
import {Button} from 'coral-ui';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {showSignInDialog} from 'coral-framework/actions/auth';

const SignInButton = ({loggedIn, showSignInDialog}) => (
  <div>
    {
      !loggedIn ? (
        <Button id="coralSignInButton" onClick={showSignInDialog} full>
          Sign in to comment
        </Button>
      ) : null
    }
  </div>
);

const mapStateToProps = ({auth}) => ({loggedIn: auth.loggedIn});

const mapDispatchToProps = dispatch =>
  bindActionCreators({showSignInDialog}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(SignInButton);