import LineRecognitionDraw from '../shared/service/lineRecognitionDraw';
import { createFocusPage } from '../shared/common/focusPageMixin';
import {
    LineRecognitionData,
    LineType,
    LineTypeConfig,
} from '../shared/service/lineRecognitionDraw';
import { NUMBER_COLORS } from '../../constants/colors';

/**
 * 广告位ID：adunit-89cff2de998f1146
请返回广告位列表，获取广告位代码，将代码插入小程序页面中适合位置，发布后即展现对应广告位。
 */

// 线条类型配置
const LINE_TYPES: Array<{ type: LineType; name: string }> = [
    { type: 'straight', name: '直线' },
    { type: 'dashed', name: '虚线' },
    { type: 'wavy', name: '波浪线' },
    { type: 'zigzag', name: '锯齿线' },
    { type: 'spiral', name: '电话线' },
];

createFocusPage({
    canvas: null as Canvas | null,
    ctx: null as RenderingContext | null,
    boxHeight: 0,
    boxWidth: 0,
    drawService: null as LineRecognitionDraw | null,
    lineData: null as LineRecognitionData | null,

    data: {
        pageTitle: '线条识别',
        functionId: '',
        hasContent: false,
        showShareDialog: false,
    },

    onLoad(options: { id?: string }) {
        const functionId = options.id || 'line-recognition';
        this.setData({
            functionId,
        });
        this.initPageInfo(functionId, '线条识别');
    },

    onReady() {
        this.initCanvas({
            createDrawService: (
                canvas: Canvas,
                ctx: RenderingContext,
                options?: Record<string, any>,
            ) => {
                return new LineRecognitionDraw(canvas, ctx, options);
            },
            drawServiceOptions: {
                title: this.data.pageTitle,
                subTitle: '认识不同线条，画出颜色对应的线条',
                functionId: this.data.functionId,
            },
            onCanvasReady: () => {
                // 初始随机生成
                this.onRandom();
            },
        });
    },

    /**
     * 绘制Canvas内容
     */
    async drawCanvas() {
        if (!this.ctx || !this.drawService || !this.lineData) {
            return;
        }

        try {
            await this.drawService.draw(this.lineData);
            this.setData({ hasContent: true });
        } catch (error) {
            console.error('绘制失败:', error);
            this.setData({ hasContent: false });
        }
    },

    /**
     * 随机生成
     */
    onRandom() {
        // 从NUMBER_COLORS中随机选择5种颜色（排除11和12：柔和棕色和柔和黑灰）
        const colorKeys = Object.keys(NUMBER_COLORS)
            .map(Number)
            .filter((key) => key !== 11 && key !== 12); // 排除柔和棕色和柔和黑灰
        const shuffledColors = [...colorKeys].sort(() => Math.random() - 0.5);
        const selectedColorKeys = shuffledColors.slice(0, 5);

        // 创建5个线条配置（随机排列）
        const shuffledLineTypes = [...LINE_TYPES].sort(
            () => Math.random() - 0.5,
        );
        const referenceLines: LineTypeConfig[] = shuffledLineTypes.map(
            (lineType, index) => ({
                type: lineType.type,
                name: lineType.name,
                color: NUMBER_COLORS[selectedColorKeys[index]],
            }),
        );

        // 创建练习区域的16个色块（2列×8行）
        const practiceBlocks: Array<{
            color: string;
            lineType: LineType;
            x: number;
            y: number;
        }> = [];

        // 为每行生成色块
        for (let row = 0; row < 8; row++) {
            for (let col = 0; col < 2; col++) {
                // 随机选择一个线条类型和颜色
                const randomLineIndex = Math.floor(
                    Math.random() * referenceLines.length,
                );
                const selectedLine = referenceLines[randomLineIndex];

                // 生成随机错落感（X轴偏移：-20到20，Y轴偏移：-8到8，确保不重叠）
                // 行高55，色块35，所以Y轴偏移最大8，确保不重叠
                const xOffset = (Math.random() - 0.5) * 40;
                const yOffset = (Math.random() - 0.5) * 16;

                practiceBlocks.push({
                    color: selectedLine.color,
                    lineType: selectedLine.type,
                    x: xOffset,
                    y: yOffset,
                });
            }
        }

        this.lineData = {
            referenceLines,
            practiceBlocks,
        };

        this.drawCanvas();
    },
});