var React = require('react');
var ItemActions = require('../../actions/itemActions');
var NavigationActions = require('../../actions/navigationActions');
var NavigationStore = require('../../stores/navigationStore');

var Globals = require('../../globals');
var Router = require('react-router');
var PaypalButton = require('./paypalButton');
var PikpaylButton = require('./pikpayButton');
var CashOnDeliveryButton = require('./cashOnDeliveryButton');

var PaymentSelect = React.createClass({
    render: function() {
      var cashOnDeliveryBtn = ( <CashOnDeliveryButton onCashClick={this.props.onCashClick} disabled={this.props.cashOnDeliveryDisabled} cartId={this.props.cartId}/> );
      var pikpayBtn = ( <PikpaylButton amount={this.props.amount} deliveryCost={this.props.deliveryCost} disabled={this.props.disabled} deliveryDestination={this.props.deliveryDestination} cartId={this.props.cartId}/> );
      var paypalBtn = ( <PaypalButton disabled={this.props.disabled} deliveryDestination={this.props.deliveryDestination} amount={this.props.amount} deliveryCost={this.props.deliveryCost} cartId={this.props.cartId}/> );

        return (
          <div>
          <div className="payment_select btn-group payment-select-desktop hidden-xs">
            {cashOnDeliveryBtn}
            {pikpayBtn}
            {paypalBtn}
          </div>

          <div className="payment_select btn-group-vertical payment-select-mobile visible-xs">
            {cashOnDeliveryBtn}
            {pikpayBtn}
            {paypalBtn}
          </div>
        </div>);
      }
});


module.exports = PaymentSelect;