/**
 * 图形符号配对绘制服务
 */

import { BaseDrawService } from '../../../service/baseDraw';
import { drawShapeSymbolShape } from '../shapes/shapeSymbolShapes';

/**
 * 图形符号配对数据
 */
export interface ShapeSymbolData {
    /** 图例映射（4个图形和符号的对应关系） */
    legendMapping: Array<{
        shapeId: string;
        symbol: string;
        color: string;
    }>;
    /** 练习区域的行数据（6行，每两行一组） */
    practiceRows: Array<
        Array<{ shapeId: string | null; symbol: string | null }>
    >;
    /** 图形颜色映射 */
    shapeColorMap: Record<string, string>;
}

/**
 * 图形符号配对绘制服务
 */
class ShapeSymbolDraw extends BaseDrawService {
    gridData: ShapeSymbolData | null = null;

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

    /**
     * 绘制图形符号配对内容
     */
    async draw(gridData: ShapeSymbolData) {
        if (!gridData || !gridData.legendMapping || !gridData.practiceRows) {
            return;
        }

        this.setPrintConfig();
        this.gridData = gridData;
        this.clear();
        this.setPaper();

        // 绘制Header
        if (this.headerType !== 'minimal') {
            await this.drawHeader();
        } else {
            this.drawMiniHeader();
        }

        // 绘制内容区域
        this.drawDivider();
        this.drawContent({
            ctx: this.ctx,
            gridData: this.gridData,
            canvasWidth: this.canvasWidth,
            startY: this.currentY,
        });
    }

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

        startY = startY + 25;

        const margin = 40; // 左右边距
        const legendCols = 4; // 图例列数
        const legendRows = 2; // 图例行数
        const cellSize = 65; // 每个格子的大小
        const gridWidth = cellSize * legendCols;
        const gridHeight = cellSize * legendRows;

        // 绘制参考网格（上面的九宫格）
        const legendStartX =
            margin + (canvasWidth - margin * 2 - gridWidth) / 2; // 居中
        const legendStartY = startY;

        // 绘制参考网格的网格线
        this.drawGridLines(
            ctx,
            legendStartX,
            legendStartY,
            gridWidth,
            gridHeight,
            cellSize,
            legendCols,
            legendRows,
        );

        // 绘制图例内容
        // 优化常量设置，减少重复计算，增强可维护性
        // const legendColSpacing = 24; // 列间距(px)，如需调整只此一处
        // const legendCellHeight = cellSize; // 图例格子的高度，当前与cellSize一致

        gridData.legendMapping.forEach((mapping, index: number) => {
            if (!mapping) return;

            const shapeX = legendStartX + index * cellSize + cellSize / 2; // 图片居中，假设图片大小50x50
            const shapeY = legendStartY + cellSize / 2;

            const shapeSize = 42;
            const shapeColor = mapping.color || '#000';
            drawShapeSymbolShape(
                ctx,
                mapping.shapeId,
                shapeX,
                shapeY,
                shapeSize,
                shapeColor,
            );

            // 第二行：绘制符号（使用 emoji）
            const symbolX = legendStartX + index * cellSize + cellSize / 2; // 图片居中，假设图片大小50x50
            const symbolY = legendStartY + cellSize + cellSize / 2 + 5;
            this.drawSymbol(ctx, symbolX, symbolY, mapping.symbol, 30);
        });

        const dividerY = legendStartY + legendRows * cellSize + 30;
        this.drawDashedDivider(dividerY, margin);

        // 绘制练习区域（六行七列，使用网格线，确保正方形格子）
        const practiceStartY = dividerY + 30;
        const practiceCols = 8;
        const practiceRows = 8;
        const practiceCellSize = 60; // 练习格子大小（正方形）
        const practiceGridWidth = practiceCellSize * practiceCols;
        const practiceGridHeight = practiceCellSize * practiceRows;

        // 计算练习区域起始X位置（居中）
        const practiceStartX =
            margin + (canvasWidth - margin * 2 - practiceGridWidth) / 2;

        // 绘制练习区域网格线（使用 drawGridLines）
        this.drawGridLines(
            ctx,
            practiceStartX,
            practiceStartY,
            practiceGridWidth,
            practiceGridHeight,
            practiceCellSize,
            practiceCols,
            practiceRows,
        );

        // 绘制练习内容
        for (let row = 0; row < practiceRows; row++) {
            const practiceRow = gridData.practiceRows[row];
            if (!practiceRow) continue;

            const rowY = practiceStartY + row * practiceCellSize;
            const cellCenterY = rowY + practiceCellSize / 2;

            for (let col = 0; col < practiceCols; col++) {
                const cell = practiceRow[col];
                if (!cell) continue;

                const colX = practiceStartX + col * practiceCellSize;
                const cellCenterX = colX + practiceCellSize / 2;

                // 如果第一行（图形行），绘制图形（使用相同颜色，无边框，居中）
                if (row % 2 === 0 && cell.shapeId) {
                    const shapeSize = 42;
                    const shapeColor =
                        gridData.shapeColorMap[cell.shapeId] || '#000';
                    drawShapeSymbolShape(
                        ctx,
                        cell.shapeId,
                        cellCenterX,
                        cellCenterY,
                        shapeSize,
                        shapeColor,
                    );
                }
                // 第二行（符号行）留空，让小朋友涂符号
            }
        }
    }

    /**
     * 绘制符号（使用 emoji 文字）
     */
    private drawSymbol(
        ctx: RenderingContext,
        x: number,
        y: number,
        symbol: string,
        fontSize: number,
    ): void {
        ctx.save();

        // 符号映射：将符号转换为 emoji
        const symbolMap: Record<string, string> = {
            '+': '➕',
            '-': '➖',
            '×': '✖️',
            '✓': '✔️',
        };

        const emojiSymbol = symbolMap[symbol] || symbol;

        ctx.font = `bold ${fontSize}px Arial`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = '#000';
        ctx.fillText(emojiSymbol, x, y);

        ctx.restore();
    }

    /**
     * 绘制网格线
     */
    private drawGridLines(
        ctx: RenderingContext,
        gridStartX: number,
        gridStartY: number,
        gridWidth: number,
        gridHeight: number,
        cellSize: number,
        legendCols: number,
        legendRows: number,
    ): void {
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 1;
        ctx.setLineDash([]); // 实线

        // 绘制垂直线
        for (let i = 0; i <= legendCols; i++) {
            const x = gridStartX + i * cellSize;
            ctx.beginPath();
            ctx.moveTo(x, gridStartY);
            ctx.lineTo(x, gridStartY + gridHeight);
            ctx.stroke();
        }

        // 绘制水平线
        for (let i = 0; i <= legendRows; i++) {
            const y = gridStartY + i * cellSize;
            ctx.beginPath();
            ctx.moveTo(gridStartX, y);
            ctx.lineTo(gridStartX + gridWidth, y);
            ctx.stroke();
        }
    }
}

export default ShapeSymbolDraw;