class RoundRectButtonSetting {

	constructor(width, height, roundAmount) {
		this.width = width;
		this.height = height;
		this.roundAmount = 0;
		if(typeof roundAmount === "undefined") {
			let shorterSide = width > height ? height : width;
			this.roundAmount = shorterSide * 0.1;
		} else {
			this.roundAmount = roundAmount;
		}
		this.strokeWidth = RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX;


		this.strokeColors = RoundRectButtonSetting.DEFAULT_STROKE_COLORS;
		this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
		this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
		this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
	};

	setStrokeColor(out, over, down, disabled) {
		this.strokeColors.out = out;
		this.strokeColors.over = over;
		this.strokeColors.odownut = down;
		this.strokeColors.disabled = disabled;
	}

	setButtonColor(out, over, down, disabled) {
		this.buttonColors.out = out;
		this.buttonColors.over = over;
		this.buttonColors.odownut = down;
		this.buttonColors.disabled = disabled;
	}

	setTextColor(out, over, down, disabled) {
		this.textColors.out = out;
		this.textColors.over = over;
		this.textColors.odownut = down;
		this.textColors.disabled = disabled;
	}

}

RoundRectButtonSetting.DEFAULT_STROKE_COLORS = {
	out: 0x666666,
	over: 0x333333,
	down: 0x333333,
	disabled: 0x666666
};

RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
	out: 0xffffff,
	over: 0xddffdd,
	down: 0xaaffaa,
	disabled: 0x333333
};

RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
	out: "#000",
	over: "#333",
	down: "#666",
	disabled: "#999"
};

RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
	font: "30px Arial",
	boundsAlignH: "center",		// left, center. right
	boundsAlignV: "middle", 	// top, middle, bottom
	fill: "#fff"
};

RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10;	// in pixel
RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX		= 5;	// in pixel



class RoundRectButton {
	constructor(roundRectSetting, buttonText, clickEvent) {
		this.setting = roundRectSetting;
		this.clickEvent = clickEvent;

		this.buttonStroke = this.makeButtonStroke();
		// this.buttonStroke.anchor.setTo(0.5, 0.5);
		this.buttonStroke.inputEnabled = true;
		this.setEventMethod(this.buttonStroke);

		this.text = this.makeText(buttonText);

		this.button = this.makeButtonSprite();
		this.button.addChild(this.text);
		// this.button.anchor.setTo(0.5, 0.5);
		this.button.inputEnabled = true;
		this.setEventMethod(this.button);

		this.mouseOut();
	}

	setEventMethod(target) {
		target.events.onInputOver.add(function() { this.mouseOver(); }, this);
		target.events.onInputOut.add(function() { this.mouseOut(); }, this);
		target.events.onInputDown.add(function() {
			this.mouseDown();

			if(this.clickEvent) {
				this.clickEvent();
			}
		}, this);
		target.events.onInputUp.add(function() { this.mouseOver(); }, this);
	}

	makeButtonStroke() {
		let btnTexture = new Phaser.Graphics()
			.beginFill(0xffffff)
			.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
			.endFill()
			.generateTexture();

		return game.add.sprite(0, 0, btnTexture);
	}

	makeButtonSprite() {
		let width = this.setting.width - this.setting.strokeWidth * 2;
		let height = this.setting.height - this.setting.strokeWidth * 2;
		let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width);
		let btnTexture = new Phaser.Graphics()
			.beginFill(0xffffff)
			.drawRoundedRect(this.setting.strokeWidth, this.setting.strokeWidth, width, height, innerRoundAmount)
			.endFill()
			.generateTexture();

		return game.add.sprite(0, 0, btnTexture);
	}

	makeText(textContent) {
		let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle)
			.setTextBounds(0, 0, this.setting.width, this.setting.height);

		btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
		// btnText.anchor.setTo(0.5);

		return btnText;
	}


	mouseOut() {
		this.text.fill = this.setting.textColors.out;
		this.buttonStroke.tint = this.setting.strokeColors.out;
		this.button.tint = this.setting.buttonColors.out;
	}

	mouseOver() {
		this.text.fill = this.setting.textColors.over;
		this.buttonStroke.tint = this.setting.strokeColors.over;
		this.button.tint = this.setting.buttonColors.over;
	}

	mouseDown() {
		this.text.fill = this.setting.textColors.down;
		this.buttonStroke.tint = this.setting.strokeColors.down;
		this.button.tint = this.setting.buttonColors.down;
	}

	buttonDisabled() {
		this.text.fill = this.setting.textColors.disabled;
		this.buttonStroke.tint = this.setting.strokeColors.disabled;
		this.button.tint = this.setting.buttonColors.disabled;
	}



	move(x, y) {
		this.buttonStroke.x = x - this.setting.width / 2;
		this.buttonStroke.y = y - this.setting.height / 2;

		this.button.x = x  - this.setting.width / 2+ this.setting.strokeWidth;
		this.button.y = y  - this.setting.height / 2+ this.setting.strokeWidth;
	}

	get inputEnabled() {
		return this.button.inputEnabled;
	}

	set inputEnabled(isEnabled) {
		this.buttonStroke.inputEnabled = isEnabled;
		this.button.inputEnabled = isEnabled;

		if(isEnabled === true) {
			this.mouseOut();
		} else {
			this.buttonDisabled();
		}
	}

	set lineSpacing(spacingInPixels) {
		this.text.lineSpacing = spacingInPixels;
	}
}