var EditSubscriptionModal = ModalFormView.extend({
	el: ".mediaDrawer.editSubscription",
	action: "/api/subscription",
	updateAction: "/api/subscription",
	destroyAction: "/api/subscription/destroy",
	
	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,
	},
	
	sync: function(){
		$.put(this.syncAction, this.didLoad.bind(this))
	},

	loaded: false,
	load: function(){
		this.reset()
		if (this.loaded) { return this.show() }
		$.get(this.action, this.didLoad.bind(this))
	},
	didLoad: function(data){
		this.loaded = true
		this.plans = data.plans
		if (data.subscription) {
			this.subscriber = data.subscription
		}
		else if (data.error) {
			// ...no subscription found
			this.subscriber = null
		}
		return this.show()
	},
	
	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)
	},
	
	calculateTotals: function(subscriber, plan){
		var t = {}
		t.is_pro             = plan.name == "pro"
		t.is_monthly         = subscriber.plan_period == "monthly"
		t.plan_price         = t.is_monthly ? plan.monthly_price : plan.yearly_price
		t.basic_layout_price = t.is_monthly ? plan.basic_layout_monthly_price : plan.basic_layout_yearly_price
		t.basic_layout_total = subscriber.basic_layouts * t.basic_layout_price
		t.pro_layout_price   = t.is_monthly ? plan.pro_layout_monthly_price : plan.pro_layout_yearly_price
		t.pro_layout_total   = t.is_pro ? subscriber.pro_layouts * t.pro_layout_price : 0
		t.plan_total         = t.plan_price + t.basic_layout_total + t.pro_layout_total
		return t
	},
	
	updateTotals: function(){
		var subscriber = this.subscriber
		var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ]
		var totals = this.calculateTotals(subscriber, plan)
		
		this.$planType.html              ( plan.name )
		this.$planCost.toDollars         ( totals.plan_price )

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

		this.$basicLayoutCost.toDollars  ( totals.basic_layout_price )
		this.$basicLayoutQuantity.html   ( subscriber.basic_layouts )
		this.$basicLayoutTotal.toDollars ( totals.basic_layout_total )

		this.$proLayoutCost.toDollars    ( totals.pro_layout_price )
		this.$proLayoutQuantity.html     ( subscriber.pro_layouts )
		this.$proLayoutTotal.toDollars   ( totals.pro_layout_total )
		
		this.$planTotal.toDollars        ( totals.plan_total )
	},
	
	update: function(){
		$.ajax({
			url: this.updateAction,
			type: "put",
			data: { _csrf: this.$csrf.val() },
			success: function(data){
			}
		})
	},
	
	destroy: function(){
		var msg = "Are you sure you want to cancel your subscription?"
		ConfirmModal.confirm(msg, function(){
			$.ajax({
				url: this.destroyAction,
				type: "delete",
				data: { _csrf: this.$csrf.val() },
				success: function(data){
				}
			})
		}.bind(this))
	},

})