import MultiplicationTableDraw from '../shared/service/multiplicationTableDraw';
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 MultiplicationTableDraw | null,
    multiplicationTableData: null as {} | null,

    data: {
        pageTitle: '九九乘法表',
        functionId: '',
        hasContent: false,
        showShareDialog: false,
    } as CanvasDataState,

    onLoad(options: { id?: string }) {
        const functionId = options.id || 'multiplication-table';
        this.setData({
            pageTitle: '九九乘法表',
        });
        this.initPageInfo(functionId, '九九乘法表');
    },

    onReady() {
        this.initCanvas({
            createDrawService: (
                canvas: Canvas,
                ctx: RenderingContext,
                options?: Record<string, any>,
            ) => {
                return new MultiplicationTableDraw(canvas, ctx, options);
            },
            drawServiceOptions: {
                title: '九九乘法表',
            },
            onCanvasReady: () => {
                // 初始绘制
                this.drawCanvas();
            },
        });
    },

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

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

    /**
     * 随机生成（重新绘制，颜色会随机变化）
     */
    onRandom() {
        this.drawCanvas();
    },
});