/**
 * 绘制内容区域的参数接口
 */
interface DrawNumberContentParams {
    ctx: RenderingContext;
    selectedNumber: number;
    canvasWidth: number; // 逻辑像素宽度（已除以3）
    startY: number; // 起始Y坐标
}

/**
 * 绘制数字涂色内容区域服务
 * 随机绘制1-10的数字，尺寸除以3
 */
export function drawNumberContent({
    ctx,
    selectedNumber,
    canvasWidth,
    startY,
}: DrawNumberContentParams): void {
    const rows = 6;
    const radius = 26; // 约26.67
    const fontSize = 24; // 24

    const startYPos = startY + 10 + radius; // 约47.33
    const startX1 = 100 + radius; // 约112.22
    const startX2 = 60 + radius; // 约75.56
    const spaceWidthFirst = (canvasWidth - startX1 * 2) / (5 - 1);
    const spaceWidthSecond = (canvasWidth - startX2 * 2) / (6 - 1);
    const spaceHeight = 18; // 18

    ctx.moveTo(startX1, startYPos);
    for (let i = 0; i < rows; i++) {
        const cols = i % 2 === 0 ? 5 : 6;

        for (let j = 0; j < cols; j++) {
            const y = startYPos + i * (spaceHeight + radius * 2);
            const x =
                i % 2 === 0
                    ? startX1 + j * spaceWidthFirst
                    : startX2 + j * spaceWidthSecond;

            // 随机生成1-10的数字，但确保包含选中的数字
            let number: number;
            if (i === 0 && j === 0) {
                // 第一个位置固定为选中的数字
                number = selectedNumber;
            } else {
                // 其他位置随机，但增加选中数字出现的概率
                const random = Math.random();
                if (random < 0.3) {
                    // 30%概率是选中的数字
                    number = selectedNumber;
                } else {
                    // 70%概率是其他随机数字
                    number = Math.floor(Math.random() * 10) + 1;
                }
            }

            // 绘制圆形背景（线宽除以3）
            ctx.fillStyle = '#fff';
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1; // 约1.33
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fill();
            ctx.stroke();
            ctx.closePath();

            // 绘制数字（字体大小除以3）
            ctx.fillStyle = '#333';
            ctx.font = `bold ${fontSize}px "Microsoft Yahei"`;
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'center';
            ctx.fillText(String(number), x, y, radius * 2);
        }
    }
}