/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");

/**** 
* Classes
****/ 
var ColorButton = Container.expand(function (color) {
	var self = Container.call(this);
	var buttonBg = self.attachAsset('buttonBg', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var colorIndicator = self.attachAsset('brush', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: 6,
		scaleY: 6
	});
	colorIndicator.tint = color;
	self.color = color;
	self.setSelected = function (isSelected) {
		if (isSelected) {
			buttonBg.tint = 0xFFFFFF;
		} else {
			buttonBg.tint = 0x333333;
		}
	};
	self.down = function () {
		if (currentTool === 'brush') {
			setActiveColor(self.color);
		}
	};
	return self;
});
var DrawingPoint = Container.expand(function () {
	var self = Container.call(this);
	var brushGraphics = self.attachAsset('brush', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.setColor = function (color) {
		brushGraphics.tint = color;
	};
	self.setSize = function (size) {
		brushGraphics.scale.set(size / 10);
	};
	return self;
});
var SizeButton = Container.expand(function (size) {
	var self = Container.call(this);
	var buttonBg = self.attachAsset('buttonBg', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var sizeIndicator = self.attachAsset('brush', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: size / 3,
		scaleY: size / 3
	});
	self.size = size;
	self.setSelected = function (isSelected) {
		if (isSelected) {
			buttonBg.tint = 0xFFFFFF;
		} else {
			buttonBg.tint = 0x333333;
		}
	};
	self.down = function () {
		setActiveBrushSize(self.size);
	};
	return self;
});
var ToolButton = Container.expand(function (toolType, icon) {
	var self = Container.call(this);
	var buttonBg = self.attachAsset('buttonBg', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var iconGraphic = self.attachAsset(icon, {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: 0.8,
		scaleY: 0.8
	});
	self.toolType = toolType;
	self.setSelected = function (isSelected) {
		if (isSelected) {
			buttonBg.tint = 0xFFFFFF;
		} else {
			buttonBg.tint = 0x333333;
		}
	};
	self.down = function () {
		setActiveTool(self.toolType);
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0xF0F0F0
});

/**** 
* Game Code
****/ 
// Drawing variables
var drawingLayer = new Container();
var drawingPoints = [];
var isDrawing = false;
var lastX = 0;
var lastY = 0;
// UI variables
var uiLayer = new Container();
var colorPalette = [];
var sizeButtons = [];
var toolButtons = [];
var currentColor = 0x000000;
var currentBrushSize = 20;
var currentTool = 'brush';
// Setup drawing canvas
game.addChild(drawingLayer);
game.addChild(uiLayer);
// Initialize the color palette
var colors = [0x000000,
// Black
0xFF0000,
// Red
0xFF9900,
// Orange
0xFFFF00,
// Yellow
0x00FF00,
// Green
0x0000FF,
// Blue
0x9900FF,
// Purple
0xFFFFFF // White
];
// Create bottom panel
var bottomPanel = LK.getAsset('panel', {
	anchorX: 0,
	anchorY: 0,
	scaleX: 4.1,
	// Make it span the width of the screen
	scaleY: 1.5
});
bottomPanel.y = 2732 - 150; // Position at bottom of screen
uiLayer.addChild(bottomPanel);
// Create color buttons
for (var i = 0; i < colors.length; i++) {
	var colorButton = new ColorButton(colors[i]);
	colorButton.x = 100 + i * 100;
	colorButton.y = 2732 - 100;
	colorPalette.push(colorButton);
	uiLayer.addChild(colorButton);
}
// Create brush size buttons
var sizes = [10, 20, 30, 40];
for (var i = 0; i < sizes.length; i++) {
	var sizeButton = new SizeButton(sizes[i]);
	sizeButton.x = 100 + i * 100;
	sizeButton.y = 2732 - 200;
	sizeButtons.push(sizeButton);
	uiLayer.addChild(sizeButton);
}
// Create eraser button
var eraserButton = new ToolButton('eraser', 'eraserButton');
eraserButton.x = 1800;
eraserButton.y = 2732 - 100;
toolButtons.push(eraserButton);
uiLayer.addChild(eraserButton);
// Create clear button
var clearButton = new ToolButton('clear', 'clearButton');
clearButton.x = 1900;
clearButton.y = 2732 - 100;
uiLayer.addChild(clearButton);
// Create title text
var titleText = new Text2("DoodleCraft", {
	size: 40,
	fill: 0x333333
});
titleText.anchor.set(0.5, 0);
titleText.x = 2048 / 2;
titleText.y = 20;
LK.gui.addChild(titleText);
// Set initial UI state
setActiveColor(colors[0]);
setActiveBrushSize(sizes[1]);
setActiveTool('brush');
// Main drawing functions
function startDrawing(x, y) {
	isDrawing = true;
	lastX = x;
	lastY = y;
	// Add the first point
	addDrawingPoint(x, y);
}
function continueDrawing(x, y) {
	if (!isDrawing) return;
	// Calculate distance between last point and current position
	var dx = x - lastX;
	var dy = y - lastY;
	var distance = Math.sqrt(dx * dx + dy * dy);
	// For smoother lines, add points at regular intervals
	var step = Math.max(1, currentBrushSize / 4);
	var numSteps = Math.ceil(distance / step);
	if (numSteps > 1) {
		for (var i = 1; i <= numSteps; i++) {
			var ratio = i / numSteps;
			var pointX = lastX + dx * ratio;
			var pointY = lastY + dy * ratio;
			addDrawingPoint(pointX, pointY);
		}
	} else {
		addDrawingPoint(x, y);
	}
	lastX = x;
	lastY = y;
}
function stopDrawing() {
	isDrawing = false;
}
function addDrawingPoint(x, y) {
	var point = new DrawingPoint();
	point.x = x;
	point.y = y;
	if (currentTool === 'brush') {
		point.setColor(currentColor);
	} else if (currentTool === 'eraser') {
		point.setColor(0xF0F0F0); // Same as background
	}
	point.setSize(currentBrushSize);
	drawingLayer.addChild(point);
	drawingPoints.push(point);
}
function clearCanvas() {
	for (var i = 0; i < drawingPoints.length; i++) {
		drawingPoints[i].destroy();
	}
	drawingPoints = [];
}
// UI state management
function setActiveColor(color) {
	currentColor = color;
	// Update UI to reflect selection
	for (var i = 0; i < colorPalette.length; i++) {
		colorPalette[i].setSelected(colorPalette[i].color === currentColor);
	}
}
function setActiveBrushSize(size) {
	currentBrushSize = size;
	// Update UI to reflect selection
	for (var i = 0; i < sizeButtons.length; i++) {
		sizeButtons[i].setSelected(sizeButtons[i].size === currentBrushSize);
	}
}
function setActiveTool(tool) {
	currentTool = tool;
	// Handle special tool actions
	if (tool === 'clear') {
		clearCanvas();
		currentTool = 'brush'; // Switch back to brush after clearing
	}
	// Update UI to reflect selection
	for (var i = 0; i < toolButtons.length; i++) {
		toolButtons[i].setSelected(toolButtons[i].toolType === currentTool);
	}
}
// Event handlers
game.down = function (x, y) {
	// Only draw if we're above the control panel
	if (y < bottomPanel.y) {
		startDrawing(x, y);
	}
};
game.move = function (x, y) {
	if (y < bottomPanel.y) {
		continueDrawing(x, y);
	}
};
game.up = function () {
	stopDrawing();
};
// Main update loop
game.update = function () {
	// Nothing needed in update for this simple drawing app
};