import React from 'react';
import { connect } from 'react-redux';
import Cookies from 'js-cookie';

import { markRead } from '../../actions/selected.js';

class ReadButton extends React.Component {
  markSelectedRead = () => {
    const token = Cookies.get('csrftoken');

    if (this.props.selected.unread > 0) {
      this.props.markRead({ ...this.props.selected }, token);
    }
  };

  render() {
    return (
      <button className="button read-button" onClick={this.markSelectedRead}>
        <i className="fas fa-check" /> Mark selected read
      </button>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  markRead: (selected, token) => dispatch(markRead(selected, token)),
});

const mapStateToProps = state => ({ selected: state.selected.item });

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