import CompareDraw from '../shared/service/compareDraw';
import {
    createMathPage,
    CanvasDataState,
} from '../shared/common/mathPageMixin';

// 获取公共方

createMathPage({
    canvas: null as Canvas | null,
    ctx: null as RenderingContext | null,
    boxHeight: 0,
    boxWidth: 0,
    drawService: null as CompareDraw | null,
    compareData: null as {
        problems: Array<{
            leftCount: number;
            rightCount: number;
            leftImageIndex: number;
            rightImageIndex: number;
            imageType: 'fruits' | 'twelve-animals';
        }>;
    } | null,

    data: {
        pageTitle: '数一数，比大小',
        subTitle: '数一数，比较数量，在⭕️中填入＞、＜、＝',
        functionId: '',
        hasContent: false,
        showShareDialog: false,
    } as CanvasDataState,

    onLoad(options: { id?: string }) {
        const functionId = options.id || 'compare';
        this.initPageInfo(functionId, '数一数，比大小');
    },

    onReady() {
        this.initCanvas({
            createDrawService: (
                canvas: Canvas,
                ctx: RenderingContext,
                options?: Record<string, any>,
            ) => {
                return new CompareDraw(canvas, ctx, options);
            },
            drawServiceOptions: {
                subTitle: this.data.subTitle,
            },
            onCanvasReady: () => {
                // Canvas 初始化完成后，生成初始数据
                this.onRandom();
            },
        });
    },

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

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

    /**
     * 随机生成
     */
    onRandom() {
        this.generateCompareData();
        this.drawCanvas();
    },

    /**
     * 生成比较数据
     */
    generateCompareData() {
        const problems: Array<{
            leftCount: number;
            rightCount: number;
            leftImageIndex: number;
            rightImageIndex: number;
            imageType: 'fruits' | 'twelve-animals';
        }> = [];

        // 生成6道题目
        for (let i = 0; i < 12; i++) {
            // 随机选择图片类型
            const imageType: 'fruits' | 'twelve-animals' =
                Math.random() < 0.5 ? 'fruits' : 'twelve-animals';

            // 根据图片类型确定最大索引
            const maxImageIndex = imageType === 'fruits' ? 22 : 12;

            // 生成左右两边的数量（1-10）
            const leftCount = Math.floor(Math.random() * 10) + 1;
            const rightCount = Math.floor(Math.random() * 10) + 1;

            // 随机选择图片索引
            const leftImageIndex =
                Math.floor(Math.random() * maxImageIndex) + 1;
            const rightImageIndex =
                Math.floor(Math.random() * maxImageIndex) + 1;

            problems.push({
                leftCount,
                rightCount,
                leftImageIndex,
                rightImageIndex,
                imageType,
            });
        }

        this.compareData = { problems };
    },
});