import { Component, OnDestroy, Input, ViewEncapsulation } from '@angular/core'

// Settings
import { website } from '@k-settings/app-setup.js'

// Services
import { HelperService } from '@k-services/svc.helper'
import { ConfiguratorService }  from '../../services/svc.configurator'

// Interfaces
import { ISubscription } from 'rxjs/Subscription'


/**
 * Shows a banner with and text either based on given product type or static value.
 * @input type : `'default'` | `'parent'` | `'static'` - Type is optional and will default to `'default'`
 */
@Component({
	moduleId: module.id+ '',
	selector: 'configurator-banner',
	templateUrl: './template/t--banner.pug',
	styleUrls: ['sty.banner.scss'],
	encapsulation: ViewEncapsulation.None
})
export class ConfiguratorBannerComponent {

	// ---- Variables ---- \\
	@Input() type: 'default' | 'child' | 'parent' | 'static' = 'default'

	// Helpers
	private mediaPath = this._helper.server + 'i/'
	private store: string = website

	// Setup
	private staticMedia: string = this.mediaPath + '/assets/default_banner/full/' + this.store
	private staticDescriptionId: string = 'banner-description_default'

	// Data
	public bannerMediaPath: string
	public bannerDescriptionId: string


	// Observables subscriptions
	productSubscription: ISubscription



	constructor(
		private _helper: HelperService,
		private _configurator : ConfiguratorService
	) {}


	// ---- Lifecycle hooks ---- \\
	ngOnInit() {

		// Only subscribe to product changes if banner is not static
		if(this.type !== 'static') {
			this.productSubscription = this._configurator.product$.subscribe((response) => {

				if(response && response.type_id) {
					// Check if we should show assign the current values
					let assignValuesCheck
					const type_id 	= response.type_id
					const is_super 	= type_id.includes('_SUPER')
	
					switch(this.type) {
						case 'parent':
							assignValuesCheck = type_id && is_super
							break;
	
						case 'child':
							assignValuesCheck = type_id && !is_super
							break;
	
						default:
							assignValuesCheck = type_id
					}
	
					// Only assign value if previous check allows it.
					if(assignValuesCheck) {
						this.bannerMediaPath 		= this.mediaPath + 'type-cover/' + type_id + '/banner/' + this.store
						this.bannerDescriptionId 	= 'banner-description_' + type_id
					}
				}
			})
		}
		else {
			// Set static values
			this.bannerMediaPath 		= this.staticMedia
			this.bannerDescriptionId 	= this.staticDescriptionId
		}
	}


	ngOnDestroy() {
		if(this.productSubscription !== undefined) {
			this.productSubscription.unsubscribe()
		}
	}


	// ---- Functions ---- \\

}