import GridDraw from '../shared/service/gridDraw';
import { createFocusPage } from '../shared/common/focusPageMixin';
import { GridDrawingData } from '../shared/service/gridDraw';
import { generateCompletePattern } from '../shared/utils/gridUtils';
import { getRandom3x3Shape } from '../shared/shapes/gridShapes3x3';
import { getRandom5x5Shape } from '../shared/shapes/gridShapes5x5';
import { getRandom7x7Shape } from '../shared/shapes/gridShapes7x7';
import { ShapeTemplate } from '../shared/types/gridTypes';

createFocusPage({
    canvas: null as Canvas | null,
    ctx: null as RenderingContext | null,
    boxHeight: 0,
    boxWidth: 0,
    drawService: null as GridDraw | null,
    gridData: null as GridDrawingData | null,

    data: {
        pageTitle: '格子仿画',
        functionId: '',
        hasContent: false,
        showShareDialog: false,
        currentMode: '3x3', // '3x3', '5x5', '7x7'
        currentModeName: '3×3',
        typeActions: [
            { name: '3×3', value: '3x3' },
            { name: '5×5', value: '5x5' },
            { name: '7×7', value: '7x7' },
        ],
    },

    onLoad(options: { id?: string }) {
        const functionId = options.id || 'grid-drawing';
        this.setData({
            functionId,
        });
        this.initPageInfo(functionId, '格子仿画');
    },

    onReady() {
        this.initCanvas({
            createDrawService: (
                canvas: Canvas,
                ctx: RenderingContext,
                options?: Record<string, any>,
            ) => {
                return new GridDraw(canvas, ctx, options);
            },
            drawServiceOptions: {
                subTitle: '在网格中填充颜色，形成各种形状',
                functionId: this.data.functionId,
            },
            onCanvasReady: () => {
                // 初始随机生成
                this.onRandom();
            },
        });
    },

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

        try {
            // 更新 Header 的 Title
            if (this.drawService) {
                this.drawService.options.title = this.data.currentModeName;
            }

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

    /**
     * 随机生成
     */
    onRandom() {
        const mode = this.data.currentMode;
        let shape: ShapeTemplate;
        let config: GridConfig;

        // 根据模式选择形状和配置
        if (mode === '3x3') {
            shape = getRandom3x3Shape();
            config = { rows: 3, cols: 3 };
        } else if (mode === '5x5') {
            shape = getRandom5x5Shape();
            config = { rows: 5, cols: 5 };
        } else {
            // 7x7
            shape = getRandom7x7Shape();
            config = { rows: 7, cols: 7 };
        }

        // 生成完整的格子数据
        const cells = generateCompletePattern(shape);

        this.gridData = {
            config,
            cells,
            name: shape.name,
        };

        this.drawCanvas();
    },

    /** 选择类型 */
    onSelectType(event: any) {
        const { name, value } = event.detail;
        this.setData({
            currentMode: value,
            currentModeName: name,
        });
        // 重新生成数据
        this.onRandom();
    },
});