/**
 * Canvas component creation
 */

/**
 * Create and configure the canvas element
 * @param {Object} state - Editor state
 * @returns {{canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D}} Canvas element and context
 */
export function createCanvas(state) {
    const canvas = document.createElement("canvas");
    canvas.width = state.canvasWidth;
    canvas.height = state.canvasHeight;
    canvas.style.border = "1px solid var(--border-color)";
    canvas.style.backgroundColor = "#1a1a1a";
    canvas.style.cursor = "crosshair";
    // Don't use flex on canvas - let updateCanvasScale handle sizing
    canvas.style.display = "block";  // Remove inline spacing
    canvas.tabIndex = 0;

    const ctx = canvas.getContext("2d");

    return { canvas, ctx };
}

/**
 * Resize canvas to match image dimensions
 * @param {HTMLCanvasElement} canvas - Canvas element
 * @param {Object} state - Editor state
 * @param {HTMLImageElement} img - Image to match
 * @param {Function} updateCanvasLayoutFn - Function to update canvas layout
 */
export function resizeCanvasToImage(canvas, state, img, updateCanvasLayoutFn) {
    if (!img || !img.width || !img.height) return;
    const maxSize = 2048;
    const width = Math.min(maxSize, img.width);
    const height = Math.min(maxSize, img.height);
    if (canvas.width !== width || canvas.height !== height) {
        canvas.width = width;
        canvas.height = height;
        state.canvasWidth = width;
        state.canvasHeight = height;
        if (updateCanvasLayoutFn) {
            updateCanvasLayoutFn();
        }
    }
}