import React from "react";
import { connect } from "react-redux";
import { editOrder } from "../../actions/order_actions";
import Button from "../atoms/Button";

const OrderButtons = ({ order, editOrder }) => {

  const FULFILLED = "FULFILLED";
  const CANCELLED = "CANCELLED";

  const handleUpdate = (action) => {
    if (action === FULFILLED) {
      editOrder({ ...order, status: FULFILLED });
    } else if (action === CANCELLED) {
      editOrder({ ...order, status: CANCELLED });
    }
  };

  return (
    <div className="oii-buttons">
      <Button className="fulfill-btn" onClick={() => handleUpdate(FULFILLED)} text="Fulfill"/>
      <Button className="cancel-btn" onClick={() => handleUpdate(CANCELLED)} text="Cancel"/>
    </div>
  );
};
const mapStateToProps = (state) => ({});

const mapDispatchToProps = (dispatch) => ({
  editOrder: (order) => dispatch(editOrder(order)),
});

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