import React, {Component} from 'react';
// import Loader from 'components/Loader';
import _ from 'lodash';
import './premium-subscriptions.less';

class PremiumSubscriptions extends Component {
  state = {
    configs: {}
  }

  render() {
    const braintreeData = _.get(this.props, 'braintreeData');
    const cards = braintreeData.creditCards || [];
    const paypalAccounts = braintreeData.paypalAccounts || [];
    const pms = [...paypalAccounts, ...cards];

    const cancelId = _.get(this.props.subscription, 'cancelSubscriptionLoading')
    return (
      <div className="premium-subscriptions settings-container">
        <header className="form-header">
          <h2 className="bold">Subscription Details</h2>
        </header>
        <div>
          {
            _.map(pms, (s, n) => {
              if (!s.subscriptions) {
                return <span key={n}>No Subsciptions</span>
              }
              return _.map(_.filter(s.subscriptions, (ss) => ss.status === "Active"), (us, i) => {
                return (
                  <div key={i} className="flex" style={{display: 'flex', justifyContent: 'space-between'}}>
                    <div>
                     <h4>Amount: ${us.nextBillAmount}</h4>
                     <h4>Next billing date: {us.nextBillingDate}</h4>
                     <h4>Balance: ${us.balance}</h4>
                     {
                      us.discounts && us.discounts.length ?
                        _.map(us.discounts, (dis, n) => {
                          return (
                            <h4>Discount: {dis.name} - ${dis.amount}</h4>
                          )
                        }) : null
                     }
                     {
                      s.cardType ?
                      <h4>Card: <span className="bold">{`${s.cardType} ending ${s.last4}`}</span></h4> : 
                      <h4>Payment Method: <span className="bold">Connected Paypal Account</span></h4>
                     }
                   </div>
                   <button disabled={cancelId === us.id} onClick={this.cancelPlan.bind(this, us.id)}  style={{height: "35px", lineHeight: '20px'}} className="primary-btn-large">
                      {
                        cancelId === us.id  ?
                        'Canceling' : 'Cancel Plan'
                      }
                    </button>
                  </div>
                )
              })
            })
          }
        </div>
      </div>
    );
  }

  async cancelPlan(id) {
    this.setState({canceling: id});
    this.props.cancelSubscription(id, this.props.resourceId)
    this.setState({canceling: false});
  }

}

export default PremiumSubscriptions


