context = window
rest = context.JK.Rest()
logger = context.JK.logger

UserStore = context.UserStore

@StripeConnect = React.createClass({


  getInitialState: () ->
    {
      clicked:false
    }

  openBrowser: () ->
    context.JK.popExternalLink("https://www.jamkazam.com/client#/jamclass")

  onStripeConnect: (e) ->

    if this.state.clicked
      return

    e.preventDefault()

    if window.jamClient.IsNativeClient()
      buttons = []
      buttons.push({name: 'CLOSE', buttonStyle: 'button-grey'})
      buttons.push({
        name: 'OPEN BROWSER',
        buttonStyle: 'button-orange',
        click: (() => (@openBrowser()))
      })
      context.JK.Banner.show({
        title: "Browser Needed",
        html: "You must connect to Stripe in a normal browser.<br/><br/>Please select the OPEN BROWSER button to open this page in your system browser.",
        buttons: buttons
      })
      return

    this.setState({clicked: true})
    StripeActions.connect(this.props.purpose, this.props.user)

  render: () ->

    if this.props.purpose == 'jamclass-home'
      label = `<label>You have not set up your payment information. In order for us to transfer student payments for your lessons, you'll either need to set up a new Stripe account or connect to an existing one using the button below.</label>`
    else
      label = `<label>To be paid, you must connect either a new or existing Stripe account to your JamKazam account. To do so, click the Stripe button.</label>`

    if this.props.user?.stripe_auth?
      if this.props.purpose == 'jamclass-home'
        return `<div>
          <p>Your Stripe account is properly set up and connected to enable transfer of student payments. To view lesson payment history, click the button below.</p>
          <a className="button-orange view-payments" href="/client#/account/payment-history">VIEW PAYMENTS</a>
        </div>`
      else
        return `<div>You have successfully connected your Stripe account for payments. If you need to make any changes to your Stripe account, please go to the <a href="https://dashboard.stripe.com/" target="_blank">Stripe website</a> and sign in using your Stripe credentials there to make any changes needed.</div>`

    if this.state.clicked
      imageUrl = '/assets/content/stripe-connect-light-on-dark.png'
    else
      imageUrl = '/assets/content/stripe-connect-blue-on-dark.png'

    `<div>
      {label}

      <button className="stripe-connect" onClick={this.onStripeConnect}><img src={imageUrl} /></button>
    </div>`


})