class UserStyle{

	static #localStorageIdentifier = 'userStyle';
	static #domId = '#userConfiguredStyle';

	static fromLocalStorage():UserStyle{
		const dataFromLocalStorage = localStorage.getItem(UserStyle.#localStorageIdentifier);
		if(!dataFromLocalStorage)
			return new UserStyle();
		return JSON.parse(dataFromLocalStorage) as UserStyle;
	}

	constructor(){

	}

	saveToLocalStorage(){
		localStorage.setItem(UserStyle.#localStorageIdentifier,JSON.stringify(this));
	}

	update(){
		this.saveToLocalStorage();
		if($(UserStyle.#domId).length)
			$(UserStyle.#domId).text(this.css);
	}

	get css():string{
		return `body{font-family:${this.font};font-size:${this.fontSize}px;}`;
	}

	_font = 'Helmet, Freesans, sans-serif';
	get font(){return this._font;}
	set font(v:string){
		this._font = v;
		this.update();
	}

	_fontSize:number = 16;
	get fontSize(){return this._fontSize;}
	set fontSize(v:number){
		this._fontSize = v;
		this.update();
	}



	//#region System
		_init(data: { [x: string]: any; }){
			Object.keys(data).forEach(function (pn) {
				this[pn] = clone(data[pn]);
			}, this);

			return this;
		}

		clone = function () {
			return (new setup.UserStyle())._init(this);
		};

		toJSON = function () {
			var ownData = {};
			Object.keys(this).forEach(function (pn) {
				if(typeof this[pn] !== "function")
					ownData[pn] = clone(this[pn]);
			}, this);
			return JSON.reviveWrapper('(new setup.UserStyle())._init($ReviveData$)', ownData);
		};
	//#endregion

}

setup.UserStyle = UserStyle;

$(document).one(':storyready', function (ev) {
	let userStyle = UserStyle.fromLocalStorage();
	userStyle.update();
});