context = window
rest = context.JK.Rest()
logger = context.JK.logger
LocationActions = context.LocationActions
SubscriptionActions = context.SubscriptionActions
UserStore = context.UserStore
AppStore = context.AppStore

@CurrentSubscription = React.createClass({

  mixins: [Reflux.listenTo(AppStore, "onAppInit")]

  getInitialState: () ->
    {
      selectedPlan: null
      updating: false
    }

  getDisplayNameTier: (plan_code) ->
    if plan_code == ''
      plan_code = null
    for subscriptionCode in gon.global.subscription_codes
      if plan_code == subscriptionCode.id
        return subscriptionCode.name
    return "Unknown plan code=#{plan_code}"

  getDisplayNamePrice: (plan_code) ->
    if plan_code == ''
      plan_code = null
    for subscriptionCode in gon.global.subscription_codes
      if plan_code == subscriptionCode.id
        return subscriptionCode.price
    return "Unknown plan code=#{plan_code}"

  onPlanChanged: (e) ->
    val = e.target.value
    @setState({selectedPlan: val})

  currentPlan: () ->
    if this.state.selectedPlan?
      this.state.selectedPlan
    else
      this.props.subscription.desired_plan_code || ''

  checkIfPending:() ->
    return this.state.selectedPlan?

  onSubmit: (event) ->
    if event
      event.preventDefault()
    @performSubmit()

  onChangeSubmit: (form) ->
    if @state.updating
      return
    @performSubmit()

  # user selects button on main page
  onUpdatePaymentMethod: () ->
    if gon.isNativeClient
      context.JK.popExternalLink("/client#/account/paymentHistory", true)
    else
      window.location.href = "/client#/account/paymentHistory"

  openBrowserToPayment: () ->
    if gon.isNativeClient
      context.JK.popExternalLink("/client#/account/paymentHistory", true)
    else
      window.location.href = "/client#/account/paymentHistory"

  performSubmit: () ->
    if !@state.selectedPlan?
      return

    @setState({updating: true})
    #SubscriptionActions.changeSubscription(this.state.selectedPlan)
    rest.changeSubscription(this.state.selectedPlan).done((subscription) =>
      SubscriptionActions.forceUpdate(subscription)
      has_billing_info = subscription.has_billing_info
      console.log("subscription change update", subscription)
      @setState({updating: false, selectedPlan: null})
      if has_billing_info
        @props.app.layout.notify({
          title: "Subscription updated!",
          text: "Thank you for supporting JamKazam!"
        })
      else
        if subscription.desired_plan_code
          if gon.isNativeClient
            html = context._.template($('#template-payment-still-needed-native').html(), {}, { variable: 'data' })
          else
            html = context._.template($('#template-payment-still-needed').html(), {}, { variable: 'data' })

          buttons = []
          buttons.push({name: 'CLOSE', buttonStyle: 'button-grey'})
          buttons.push({
            name: 'UPDATE PAYMENT METHOD',
            buttonStyle: 'button-orange',
            click: (() => (@openBrowserToPayment()))
          })
          context.JK.Banner.show({
            title: "Payment Method Needed",
            html: html,
            buttons: buttons})
        else
          @props.app.layout.notify({
            title: "Subscription updated!",
            text: "Thank you for supporting JamKazam!"
          })

        #@props.app.layout.notify({
        #  title: "Payment method still needed",
        #  text: "Please click UPDATE PAYMENT METHOD in the bottom-right of the screen."
        #})

    )
    .fail((jqXHR) =>
      @setState({updating: false})
      if jqXHR.status == 422
        @props.app.layout.notify({
          title: "you already have this subscription",
          text: "No changes were made to your account."
        })
      else
        @props.app.layout.notify({
          title: "unable to update subscription status",
          text: "Please contact support@jamkazam.com. Error:\n #{jqXHR.responseText}"
        })
    )

  onCancelPlan: (event) ->
    if confirm("Are you sure you want to cancel your plan?")
      SubscriptionActions.cancelSubscription()

  componentDidMount: () ->

    @root = $(@getDOMNode())

    document.querySelector('#change-subscription-form').addEventListener('submit', @onChangeSubmit.bind(this))

  comparePlans: (e) ->
    if context.JK.clientType() == 'client'
      context.JK.popExternalLink("https://jamkazam.freshdesk.com/support/solutions/articles/66000122535-what-are-jamkazam-s-free-vs-premium-features-")
      e.preventDefault()

  render: () ->
    plan_codes = []
    monthlies = []
    yearlies = []
    for plan in gon.global.subscription_codes
      if plan.cycle == 'month'
        monthlies.push(plan)
      else
        yearlies.push(plan)
    plan_codes.push(`<option key="monthly" value="monthly" disabled="disabled">-------- MONTHLY PLANS --------</option>`)
    for plan in monthlies
      plan_codes.push(`<option key={plan.id || ''} value={plan.id || ''}>{plan.name} (${plan.price.toFixed(2)}/{plan.cycle})</option>`)
    plan_codes.push(`<option key="yearly" value="yearly" disabled="disabled">-------- YEARLY PLANS --------</option>`)
    for plan in yearlies
      plan_codes.push(`<option key={plan.id || ''} value={plan.id || ''}>{plan.name} (${plan.price.toFixed(2)}/{plan.cycle})</option>`)
    plansJsx = `<select name="plan_code" onChange={this.onPlanChanged} defaultValue={this.currentPlan()} >{plan_codes}</select>`

    changeClass = 'button-orange update-plan'
    if !@state.selectedPlan? || @state.updating
      changeClass = changeClass + ' disabled'

    if @state.updating
      update_plan_text = 'UPDATING PLAN ... PLEASE WAIT'
    else
      update_plan_text = 'UPDATE PLAN'


    recurly_subscription = @props.subscription.subscription
    effective_plan_name = `<span className="plan-name">{this.getDisplayNameTier(this.props.subscription.plan_code)}</span>`
    desired_plan_name = `<span className="plan-name">{this.getDisplayNameTier(this.props.subscription.desired_plan_code)}</span>`
    admin_override_plan_name = `<span className="plan-name">{this.getDisplayNameTier(this.props.subscription.admin_override_plan_code)}</span>`
    in_trial = @props.subscription.in_trial
    admin_override = @props.subscription.admin_override_plan_code?
    effective_is_free = !!this.props.subscription.plan_code
    has_pending_subscription = @props.subscription.subscription?.pending_subscription?
    cancelled_subscription = @props.subscription.subscription?.remaining_billing_cycles == 0
    show_payment_info = null
    has_billing_info = @props.subscription.has_billing_info

    
    if admin_override
      explanation = `<span>You have a {effective_plan_name} account until your gifted plan ends {context.JK.formatDateShort(this.props.subscription.admin_override_ends_at)}.</span>`
    else if in_trial
      if @props.subscription.desired_plan_code
        if has_billing_info
          note = `<span>Billing starts for the {desired_plan_name} plan after the trial ends.</span>`
        else
          warning = `<p className="uncollectable-msg">You will drop to the <span className="plan-name">Free</span> free plan after the trial ends because you have not yet entered payment info.</p>`
          show_payment_info = true
      else
        if has_billing_info
          warning = `<p className="uncollectable-msg">You will drop to the <span className="plan-name">Free</span> free plan after the trial ends because you have not selected a plan.</p>`
        else
          warning = `<p className="uncollectable-msg">You will drop to the <span className="plan-name">Free</span> free plan after the trial ends because you have not yet entered payment info or selected a plan.</p>`
          show_payment_info = true

      explanation = `<span>You have a {effective_plan_name} account until your trial ends {context.JK.formatDateShort(this.props.subscription.trial_ends_at)}. {note}</span>`
    else
      if @props.subscription.desired_plan_code && !@props.subscription.plan_code && !has_billing_info
        explanation = `<span>You have successfully upgraded your plan to the {desired_plan_name} level, thank you!</span>`
        warning = `<p className="uncollectable-msg">For this plan to take effect, you must provide a payment method (e.g. a credit card), for the monthly subscription charge. Please click the Update Payment Method button to do this now.</p>`
        show_payment_info = true
      else
        if @props.subscription.desired_plan_code
          if !has_billing_info
            show_payment_info = true
            explanation = `<span>You have successfully upgraded your plan to the {desired_plan_name} level, thank you</span>`
            warning = `<p className="uncollectable-msg">However, you must provide a payment method (e.g. a credit card), for the monthly subscription charge. Please click the Update Payment Method button to do this now.</p>`
          else
            explanation = `<span>You have successfully upgraded your plan to the {desired_plan_name} level, thank you!</span>`

        else
          # free plan situation - not much to go on about
          explanation = `<span>You are currently on the {desired_plan_name} plan.</span>`
    if show_payment_info
      update_payment_btn = `<a className="button-orange update-payment-method" href="/client#/account/paymentHistory" onClick={this.onUpdatePaymentMethod}>UPDATE PAYMENT METHOD</a>`
    if has_pending_subscription
      billingAddendum = null #`<span><br/><br/><span>You will be billed next at the <span className="plan-name">{this.getDisplayNameTier(this.props.subscription.subscription.plan.plan_code)}</span> on the next billing cycle.</span></span>`
    else if cancelled_subscription && this.props.subscription.desired_plan_code == null && this.props.subscription.plan_code != null
      billingAddendum = `<span>However, your cancelled {effective_plan_name} plan is still active until the end of the billing cycle.</span>`# `<span><br/><br/><span>You will be billed a final time at the <span className="plan-name">{this.getDisplayNameTier(this.props.subscription.subscription.plan.plan_code)}</span> at end of this billing cycle.</span></span>`
    else
      billingAddendum = null
    `<div className="current-subscription">
          <div>
              <h2>Subscription:</h2>
              <p className="explainer">Your JamKazam subscription is currently set to the plan displayed below.  To compare the features available for different subscription plans, click the Compare Plans button below. To change your plan, click the "subscription plan" list box below, select a new plan, and then click the Update Plan button below.</p>
              <div className="subscription-plan-and-status">
                <div className="subscription-plan">
                    <form id="change-subscription-form" onSubmit={this.onChangeSubmit} >
                        <label for="plan_code">subscription plan:</label>
                        <div className="subscription-actions">
                          {plansJsx}
                          <a className="button-grey" onClick={this.comparePlans} target="_blank" href="https://jamkazam.freshdesk.com/support/solutions/articles/66000122535-what-are-jamkazam-s-free-vs-premium-features-">COMPARE PLANS</a>
                          <button className={changeClass} onClick={this.onSubmit} type="submit">{update_plan_text}</button>
                        </div>
                    </form>
                </div>
              </div>
              <div className="effective-subscription">
                <div className="explanation">
                    <p>{explanation} {billingAddendum}</p>
                    {warning}
                </div>
                  <a className="button-grey" onClick={this.onCancel}>BACK</a>{update_payment_btn}
              </div>
          </div>
      </div>`

})