/**
 * 颜色找规律绘制服务
 */

import { BaseDrawService } from '../../../core/draw/baseDraw';
import {
    drawShapeSymbolShape,
    DrawShapeOptions,
} from '../shapes/shapeSymbolShapes';

/**
 * 颜色找规律数据
 */
export interface ColorPatternData {
    /** 8组数据，每组包含图形ID和10个格子的颜色（前4个有颜色，后6个为null） */
    groups: Array<{
        shapeId: string;
        colors: Array<string | null>; // 长度为10，前4个有颜色，后6个为null
    }>;
}

/**
 * 颜色找规律绘制服务
 */
class ColorPatternDraw extends BaseDrawService {
    gridData: ColorPatternData | null = null;

    constructor(
        canvas: Canvas,
        ctx: RenderingContext,
        options?: Record<string, any>,
    ) {
        super(canvas, ctx, options);
    }

    /**
     * 绘制颜色找规律内容
     */
    async draw(gridData: ColorPatternData) {
        if (!gridData || !gridData.groups) {
            return;
        }

        this.gridData = gridData;
        this.prepareDraw();
        await this.drawHeaderAndDivider();
        this.drawContent({
            ctx: this.ctx,
            gridData: this.gridData,
            canvasWidth: this.canvasWidth,
            startY: this.currentY,
        });
    }

    /**
     * 绘制内容区域
     */
    private drawContent(params: {
        ctx: RenderingContext;
        gridData: ColorPatternData;
        canvasWidth: number;
        startY: number;
    }): void {
        const { ctx, gridData, canvasWidth } = params;
        let { startY } = params;

        startY = startY + 25;

        const margin = 40; // 左右边距
        const cols = 10; // 每行10列
        const cellSize = 50; // 每个格子的宽度
        const gridWidth = cellSize * cols;
        const groupSpacing = 40; // 每组之间的间距

        // 计算起始X位置（居中）
        const startX = margin + (canvasWidth - margin * 2 - gridWidth) / 2;

        // 绘制8组
        for (
            let groupIndex = 0;
            groupIndex < gridData.groups.length;
            groupIndex++
        ) {
            const group = gridData.groups[groupIndex];
            if (!group) continue;

            const groupY = startY + groupIndex * (cellSize + groupSpacing);

            // 绘制网格线（只绘制这一行的网格）
            this.drawGridLines(
                startX,
                groupY,
                cellSize,
                cellSize,
                cols,
                1, // 只有1行
            );

            // 绘制图形和颜色
            for (let col = 0; col < cols; col++) {
                const color = group.colors[col];
                const colX = startX + col * cellSize;
                const cellCenterX = colX + cellSize / 2;
                const cellCenterY = groupY + cellSize / 2;
                const shapeSize = 35;

                if (color) {
                    // 前4个图形：绘制带颜色的图形

                    drawShapeSymbolShape(
                        ctx,
                        group.shapeId,
                        cellCenterX,
                        cellCenterY,
                        shapeSize,
                        color,
                    );
                } else {
                    // 根据图形ID绘制轮廓
                    this.drawShapeOutline(
                        ctx,
                        group.shapeId,
                        cellCenterX,
                        cellCenterY,
                        shapeSize,
                    );
                }
            }
        }
    }

    /**
     * 绘制图形轮廓（用于空白图形）
     * 复用 shapeSymbolShapes.ts 中的绘制逻辑
     */
    private drawShapeOutline(
        ctx: RenderingContext,
        shapeId: string,
        x: number,
        y: number,
        size: number,
    ): void {
        const options: DrawShapeOptions = {
            fillColor: null,
            strokeColor: '#000',
            strokeWidth: 1.5,
        };
        // 使用新的调用方式，直接传入 options
        drawShapeSymbolShape(ctx, shapeId, x, y, size, options);
    }
}

export default ColorPatternDraw;
