import MatchConnectDraw from '../shared/service/matchConnectDraw';
import { createFocusPage } from '../shared/common/focusPageMixin';
import { MatchConnectData } from '../shared/service/matchConnectDraw';

createFocusPage({
    canvas: null as Canvas | null,
    ctx: null as RenderingContext | null,
    boxHeight: 0,
    boxWidth: 0,
    drawService: null as MatchConnectDraw | null,
    matchData: null as MatchConnectData | null,

    data: {
        pageTitle: '连连看',
        functionId: '',
        hasContent: false,
        showShareDialog: false,
    },

    onLoad(options: { id?: string }) {
        const functionId = options.id || 'match-connect';
        this.setData({
            functionId,
        });
        this.initPageInfo(functionId, '连连看');
    },

    onReady() {
        this.initCanvas({
            createDrawService: (
                canvas: Canvas,
                ctx: RenderingContext,
                options?: Record<string, any>,
            ) => {
                return new MatchConnectDraw(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.matchData) {
            return;
        }

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

    /**
     * 随机生成
     */
    onRandom() {
        // 从33张图片中随机选择5张不重复的图片
        const allImageIndices = Array.from({ length: 33 }, (_, i) => i + 1);
        const shuffled = [...allImageIndices].sort(() => Math.random() - 0.5);
        const selectedImages = shuffled.slice(0, 5);

        // 创建参考序列（顺序）
        const referenceSequence = [...selectedImages];

        // 创建6个框，每个框包含5张图片的索引（位置由绘制服务随机生成）
        const boxes: Array<{
            imageIndices: number[];
        }> = [];

        for (let boxIndex = 0; boxIndex < 6; boxIndex++) {
            // 每个框使用相同的5张图片
            boxes.push({
                imageIndices: [...selectedImages],
            });
        }

        this.matchData = {
            referenceSequence,
            boxes,
        };

        this.drawCanvas();
    },
});