var EditSubscriptionModal = ModalFormView.extend({
	el: ".mediaDrawer.editSubscription",
	action: "/api/subscription",
	method: "put",
	
	fixedClose: true,
	subscriber: null,
	
	events: {
	  "click [data-role='upgradeSubscription']": 'upgradeSubscription',
	  "click [data-role='cancelSubscription']": 'cancelSubscription',
	},
	
	initialize: function(){
	  // this.parent = opt.parent
	  this.__super__.initialize.call(this)

		this.$freePlan = this.$("#free_plan")
		this.$paidPlan = this.$("#paid_plan")
		this.$planRow = this.$(".planRow")
		this.$basicLayoutRow = this.$(".basicLayoutRow")
		this.$proLayoutRow = this.$(".proLayoutRow")
		this.$totalRow = this.$(".totalRow")

		this.$billingInterval = this.$("[data-role=billingInterval]")

		this.$planType = this.$("[data-role=planType]")
		this.$planCost = this.$("[data-role=planCost]")
		this.$planTotal = this.$("[data-role=planTotal]")

		this.$basicLayoutCost = this.$("[data-role=basicLayoutCost]")
		this.$basicLayoutQuantity = this.$("[data-role=basicLayoutQuantity]")
		this.$basicLayoutTotal = this.$("[data-role=basicLayoutTotal]")

		this.$proLayoutCost = this.$("[data-role=proLayoutCost]")
		this.$proLayoutQuantity = this.$("[data-role=proLayoutQuantity]")
		this.$proLayoutTotal = this.$("[data-role=proLayoutTotal]")

		this.$upgradeSubscription = this.$("[data-role=upgradeSubscription]")
		this.$cancelSubscription = this.$("[data-role=cancelSubscription]")
	},
	
	plan_levels: {
		free: 0,
		basic: 1,
		pro: 2,
	},

	loaded: false,
	load: function(){
		this.reset()
		if (this.loaded) { return this.show() }
		$.get("/api/subscription", function(data){
			this.loaded = true
			if (data.subscriber) {
				this.subscriber = data.subscription
				this.plans = data.plans
			}
			else if (data.error) {
				// ...no subscription found
			}
			return this.show()
		}.bind(this))
	},
	
	show: function(){
		if (! this.subscriber) {
			this.$freePlan.show()
			this.$paidPlan.hide()
			this.__super__.show.call(this)
			return
		}
		
		this.$freePlan.hide()
		this.$paidPlan.show()
		
		this.updateTotals()
				
		this.__super__.show.call(this)
	},
	
	updateTotals: function(){
		var subscriber = this.subscriber
		var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ]
		var is_pro = plan.name == "pro"
		var is_monthly = subscriber.plan_period == "monthly"
		
		var plan_price = is_monthly ? plan.monthly_price : plan.yearly_price
		this.$planType.html( plan.name )
		this.$planCost.html( plan_price )

		this.$billingInterval.html( is_monthly ? "mo." : "yr." )
		this.$proLayoutRow.toggle( is_pro )

		var basic_layout_price = is_monthly ? plan.basic_layout_monthly_price : plan.basic_layout_yearly_price
		var basic_layout_total = subscriber.basic_layouts * basic_layout_price
		this.$basicLayoutCost.html( basic_layout_price )
		this.$basicLayoutQuantity.html( subscriber.basic_layouts )
		this.$basicLayoutTotal.html( basic_layout_total )

		var pro_layout_price = is_monthly ? plan.pro_layout_monthly_price : plan.pro_layout_yearly_price
		var pro_layout_total = is_pro ? subscriber.pro_layouts * pro_layout_price : 0
		this.$proLayoutCost.html( pro_layout_price )
		this.$proLayoutQuantity.html( subscriber.pro_layouts )
		this.$proLayoutTotal.html( pro_layout_total )
		
		var plan_total = plan_price + basic_layout_total + pro_layout_total
		this.$planTotal.html( plan_total )
	},
	
	upgradeSubscription: function(){
	},
	
	cancelSubscription: function(){
	},

})