import includes from 'lodash/collection/includes';
import moment from 'moment';
import React, { Component, PropTypes } from 'react';
import Button from 'react-bootstrap/lib/Button';

class ReservationControls extends Component {
  render() {
    const {
      onCancelClick,
      onDeleteClick,
      onEditClick,
      reservation,
    } = this.props;

    if (!reservation || moment() > moment(reservation.end)) {
      return null;
    }

    return (
      <div className="buttons">
        {!includes(['accepted', 'canceled', 'declined'], reservation.status) && (
          <Button
            bsSize="xsmall"
            bsStyle="primary"
            onClick={onEditClick}
            >
            Muokkaa
          </Button>
        )}
        {includes(['accepted', 'pending'], reservation.status) && (
          <Button
            bsSize="xsmall"
            bsStyle="default"
            onClick={onCancelClick}
          >
            Peru
          </Button>
        )}
        {!reservation.status && (
          <Button
            bsSize="xsmall"
            bsStyle="danger"
            onClick={onDeleteClick}
          >
            Poista
          </Button>
        )}
      </div>
    );
  }
}

ReservationControls.propTypes = {
  onCancelClick: PropTypes.func.isRequired,
  onDeleteClick: PropTypes.func.isRequired,
  onEditClick: PropTypes.func.isRequired,
  reservation: PropTypes.object,
};

export default ReservationControls ;

@@ -1,55 +1,4 @@
-import includes from 'lodash/collection/includes';%0A
 impo
@@ -177,28 +177,65 @@
 %7B%0A  
-render() %7B%0A    const
+constructor(props) %7B%0A    super(props);%0A    this.buttons =
  %7B%0A 
@@ -243,242 +243,206 @@
     
-onC
+c
 ancel
-Click,
+: (
 %0A      
-onDeleteClick,%0A      onEditClick,%0A      reservation,%0A    %7D = this.props;%0A%0A    if (!reservation %7C%7C moment() %3E moment(reservation.end)) %7B%0A      return null;
+  %3CButton%0A          bsSize=%22xsmall%22%0A          bsStyle=%22default%22%0A          key=%22calcelButton%22%0A          onClick=%7Bprops.onCancelClick%7D%0A        %3E
 %0A    
-%7D%0A%0A
     
-return (%0A      %3Cdiv className=%22b
+  Peru%0A        %3C/B
 utton
-s%22
 %3E%0A      
   %7B!
@@ -441,81 +441,24 @@
     
-  %7B!includes(%5B'accepted', 'canceled', 'declined'%5D, reservation.status) &&
+),%0A      delete:
  (%0A 
@@ -460,34 +460,32 @@
 : (%0A        
-  
 %3CButton%0A
             
@@ -464,34 +464,32 @@
         %3CButton%0A
-  
           bsSize
@@ -500,34 +500,32 @@
 mall%22%0A          
-  
 bsStyle=%22primary
@@ -521,29 +521,53 @@
 le=%22
-primary
+danger
 %22%0A    
+      key=%22deleteButton%22%0A
         
 onCl
@@ -554,32 +554,34 @@
 Button%22%0A        
+  
 onClick=%7BonEditC
@@ -573,22 +573,30 @@
 nClick=%7B
-onEdit
+props.onDelete
 Click%7D%0A 
@@ -598,28 +598,24 @@
 ck%7D%0A        
-    
 %3E%0A          
@@ -618,20 +618,15 @@
     
-  Muokkaa%0A  
+Poista%0A
     
@@ -649,83 +649,25 @@
     
-  )%7D
+),
 %0A      
-  %7Bincludes(%5B'accepted', 'pending'%5D, reservation.status) &&
+edit:
  (%0A
-  
     
@@ -670,34 +670,32 @@
         %3CButton%0A
-  
           bsSize
@@ -706,34 +706,32 @@
 mall%22%0A          
-  
 bsStyle=%22default
@@ -719,35 +719,60 @@
    bsStyle=%22
-default%22%0A  
+primary%22%0A          key=%22editButton%22%0A
           on
@@ -778,24 +778,28 @@
 nClick=%7B
-onCancel
+props.onEdit
 Click%7D%0A 
@@ -815,33 +815,32 @@
 %3E%0A          
-  Peru%0A  
+Muokkaa%0A
         %3C/Bu
@@ -855,207 +855,531 @@
     
-  )%7D
+),
 %0A    
-    %7B!reservation.status && (%0A          %3CButton%0A            bsSize=%22xsmall%22
+%7D;%0A  %7D%0A%0A  renderButtons(buttons, status) %7B%0A    switch (status) %7B%0A    case 'accepted':%0A      return %5Bbuttons.cancel%5D;%0A    case 'canceled':%0A      return null;%0A    case 'declined':%0A      return null;
 %0A    
-        bsStyle=%22danger%22%0A            onClick=%7BonDeleteClick%7D%0A          %3E%0A            Poista%0A          %3C/B
+case 'pending':%0A      return %5Bbuttons.edit, buttons.cancel%5D;%0A    default:%0A      return %5Bbuttons.edit, buttons.delete%5D;%0A    %7D%0A  %7D%0A%0A  render() %7B%0A    const %7B reservation %7D = this.props;%0A%0A    if (!reservation %7C%7C moment() %3E moment(reservation.end)) %7B%0A      return null;%0A    %7D%0A%0A    return (%0A      %3Cdiv className=%22b
 utton
+s%22
 %3E%0A  
@@ -1384,16 +1384,68 @@
         
+%7Bthis.renderButtons(this.buttons, reservation.status
 )%7D%0A     

Refactor reservation buttons