import { Injectable, OnInit } 	from '@angular/core'
import { HttpClient, HttpHeaders, HttpErrorResponse }	 		from '@angular/common/http'

import { language }             from '@k-settings/store-helper'
import { HelperService }		from './svc.helper'

import { Subject } 				from 'rxjs/Subject'

import 'rxjs/add/operator/toPromise'

import { TransferState, makeStateKey } from '@angular/platform-browser'

const TRANSLATE_KEY = makeStateKey('translationkey')

@Injectable()
export class SharedService {

	// ---- Variables ---- \\
	isSet: boolean = false
	translatables

	// Observable sources
	private modalCallSource 		= new Subject<any>()
	private translateSource 		= new Subject<any>()
	private currentProductSource 	= new Subject<any>()
	private currentCollectionSource = new Subject<any>()
	private currentPageSource 		= new Subject<any>()
	private headerVisibleSource 	= new Subject<boolean>()
	private pageStateSource 		= new Subject<any>()

	// Observable streams
	modalCalled$ 				= this.modalCallSource.asObservable()
	public translate$ 			= this.translateSource.asObservable()
	public currentProduct$ 		= this.currentProductSource.asObservable()
	public currentCollection$ 	= this.currentCollectionSource.asObservable()
	public currentPage$ 		= this.currentPageSource.asObservable()
	public headerVisible$ 		= this.headerVisibleSource.asObservable()
	public pageState$ 			= this.pageStateSource.asObservable()



	constructor(
		private _http: HttpClient,
		private _helper: HelperService,
		private state: TransferState
	) {

		this.translatables = this.state.get(TRANSLATE_KEY, null as any)

		if(!this.translatables) {
			this.populateTranslates()
		} else {
			this.translateSource.next(this.translatables)
		}


		
		
		this.translate$.subscribe(response => {
			this.translatables = response;
		})
	}






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

	// Method that is called to set Observable for ModalComponent
	callModalMethod() {
		this.modalCallSource.next()
	}



	/**
	 * Get translates from WP
	 */
	populateTranslates() {

		this._http.get( this._helper.server + 'translate/?lang='+ language ).toPromise().then(response => {
			this.translateSource.next(response)
			this.state.set(TRANSLATE_KEY, response as null)

			return response
		})

	}



	getTranslates() {
		return this.translatables
	}



	/**
	 * TODO: Describe pls
	 * 
	 * @todo later on must change to send json object now its sending as query string
	 * @param key sending key that to be translated
	 * @param area are/section to be transalted
	 * @param description some description just some meta informatino for editor to help in where to transalte
	 */
	setTranslates(key: string, area: string = "default", description: string = ''): boolean {

		const httpOptions = {
			headers: new HttpHeaders({
				'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
			})
		}

	
		if(!!key) {

			let translateString = "value=" + key.toString() + "&area=" + area + "&description=" + description + "&lang=" + language
	
			this._http.post(this._helper.server + 'translate/?add&lang=' + language, translateString, httpOptions)
				.subscribe(
					res => {
						// console.log('Translate generated:', res)
					},
					(err: HttpErrorResponse) => {
						console.error(new Error(err.message))
					}
				)
		}

		return true
	}

	

	// ---- SETS ---- \\

	setProduct(productName: string) {
		this.currentProductSource.next(productName)
	}

	setCollection(collectionArray: Array<Object>) {
		this.currentCollectionSource.next(collectionArray)
	}

	setPage(pageName: string) {
		this.currentPageSource.next(pageName)
	}

	
	setHeaderVisibility(visible: boolean) {
		this.headerVisibleSource.next(visible)
	}

	/**
	 * Sets the page state to true or false, based on blank or non-blank template load
	 */
	setPageState(bool: boolean) {
		this.pageStateSource.next(bool)
	}

}