import CodeConnectDraw from '../shared/service/codeConnectDraw';
import { createFocusPage } from '../shared/common/focusPageMixin';
import { CodeConnectData } from '../shared/service/codeConnectDraw';
import { WATER_COLORS } from '../../constants/colors';

createFocusPage({
    canvas: null as Canvas | null,
    ctx: null as RenderingContext | null,
    boxHeight: 0,
    boxWidth: 0,
    drawService: null as CodeConnectDraw | null,
    codeData: null as CodeConnectData | null,

    data: {
        pageTitle: '译码连线',
        functionId: '',
        hasContent: false,
        showShareDialog: false,
    },

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

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

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

    /**
     * 随机生成
     */
    onRandom() {
        // 随机选择起始数字：1、2或3
        const startNumberOptions = [1, 2, 3];
        const startNumber =
            startNumberOptions[
                Math.floor(Math.random() * startNumberOptions.length)
            ];

        // 生成8个连续的数字（1-8、2-9或3-10）
        const numbers: number[] = [];
        for (let i = 0; i < 8; i++) {
            numbers.push(startNumber + i);
        }

        // 从WATER_COLORS.extended24中随机选择8种不重复的颜色
        const colorIndices = Array.from(
            { length: WATER_COLORS.extended24.length },
            (_, i) => i,
        );
        const shuffledIndices = [...colorIndices].sort(
            () => Math.random() - 0.5,
        );
        const selectedIndices = shuffledIndices.slice(0, 8);

        // 创建颜色映射
        const colorMap = numbers.map((number, index) => ({
            number,
            color: WATER_COLORS.extended24[selectedIndices[index]].hex,
        }));

        // 生成4个组的题目
        const groups: Array<{
            sequence: number[];
            dots: Array<{
                number: number;
                color: string;
                angle: number;
            }>;
        }> = [];

        for (let i = 0; i < 4; i++) {
            // 从当前数字范围中随机选择6个数字（不重复）
            const shuffledNumbers = [...numbers].sort(
                () => Math.random() - 0.5,
            );
            const sequence = shuffledNumbers.slice(0, 5);

            // 生成8个圆点的位置（圆形分布）
            const dots: Array<{
                number: number;
                color: string;
                angle: number;
            }> = [];

            // 8个圆点均匀分布在圆周上
            for (let j = 0; j < 8; j++) {
                const angle = (j / 8) * Math.PI * 2 - Math.PI / 2; // 从顶部开始，逆时针
                const number = numbers[j];
                const colorInfo = colorMap.find((m) => m.number === number);
                dots.push({
                    number,
                    color: colorInfo?.color || '#000',
                    angle,
                });
            }

            groups.push({
                sequence,
                dots,
            });
        }

        this.codeData = {
            colorMap,
            startNumber,
            groups,
        };

        this.drawCanvas();
    },
});