import { BaseDrawService } from '../../../core/draw/baseDraw';
import type { ClockProblem, ClockReadingData } from '../generators/clock-generator';
import { drawAnalogClock, drawTimeInputBox } from './drawAnalogClock';

const ROWS = 4;
const COLS = 3;
const MARGIN_X = 28;
const CLOCK_RADIUS = 52; // 原 58 的 90%
const CLOCK_TO_BOX_GAP = 13; // 原 20 缩小三分之一
const INPUT_BOX_W = 88;
const INPUT_BOX_H = 30;
const ROW_GAP = 28; // 原 14 的两倍
const CONTENT_BOTTOM_PADDING = 28;

/**
 * 认识钟表绘制服务：4×3 网格，每组钟表 + 填写框
 */
export default class ClockReadingDraw extends BaseDrawService {
    async draw(data: ClockReadingData) {
        if (!data?.problems?.length) return;

        this.prepareDraw();
        await this.drawHeaderAndDivider();
        this.drawGrid(data.problems);
        this.drawPrintFooter({ mode: 'A' });
    }

    private drawGrid(problems: ClockProblem[]) {
        const { ctx, canvasWidth, canvasHeight } = this;
        const contentTop = this.currentY;
        const availableH = canvasHeight - contentTop - CONTENT_BOTTOM_PADDING;
        const clockBlockH =
            CLOCK_RADIUS * 2 + CLOCK_TO_BOX_GAP + INPUT_BOX_H;
        const totalGridH = ROWS * clockBlockH + (ROWS - 1) * ROW_GAP;
        const startY = contentTop + Math.max(12, (availableH - totalGridH) / 2);
        const availableW = canvasWidth - MARGIN_X * 2;
        const colW = availableW / COLS;
        const rowH = clockBlockH + ROW_GAP;

        for (let i = 0; i < problems.length; i++) {
            const row = Math.floor(i / COLS);
            const col = i % COLS;
            if (row >= ROWS) break;

            const problem = problems[i];
            const cellCenterX = MARGIN_X + col * colW + colW / 2;
            const cellTopY = startY + row * rowH;
            const clockCy = cellTopY + CLOCK_RADIUS;

            drawAnalogClock(ctx, {
                cx: cellCenterX,
                cy: clockCy,
                radius: CLOCK_RADIUS,
                hour: problem.hour,
                minute: problem.minute,
            });

            const boxX = cellCenterX - INPUT_BOX_W / 2;
            const boxY = cellTopY + CLOCK_RADIUS * 2 + CLOCK_TO_BOX_GAP;
            drawTimeInputBox(ctx, boxX, boxY, INPUT_BOX_W, INPUT_BOX_H);
        }
    }
}