import { WATER_COLORS, PAPER_SIZE } from '../../constants/index';
import TextDrawService from '../../service/textDrawService';

Page({
    canvas: null as Canvas | null,
    ctx: null as RenderingContext | null,
    boxHeight: 0,
    boxWidth: 0,
    textDrawService: null as TextDrawService | null,

    data: {
        cardList: [] as Array<{ color: string; word: string }>,
    },

    onReady() {
        const query = wx.createSelectorQuery();
        query
            .select('#canvasWrapper')
            .boundingClientRect((rect) => {
                if (rect) {
                    const { width, height } = PAPER_SIZE['A4'];
                    const boxWidth = rect.width;
                    const boxHeight = boxWidth / (width / height);

                    this.boxHeight = boxHeight;
                    this.boxWidth = boxWidth;
                    this.initCanvas(boxWidth, boxHeight);
                }
            })
            .exec();
    },

    // renderCanvas() {
    //     // wx.nextTick(() => {
    //     // this.setCanvasBoxSize();
    //     // });
    //     console.log('this.boxWidth:', this.boxWidth);
    //     console.log('this.boxHeight:', this.boxHeight);
    //     if (this.boxWidth && this.boxHeight) {
    //         this.initCanvas(this.boxWidth, this.boxHeight);
    //     }
    // },

    // setCanvasBoxSize() {
    //     const { windowWidth } = wx.getWindowInfo();
    //     console.log('windowWidth---:', windowWidth);
    //     const query = wx.createSelectorQuery();
    //     query
    //         .select('#canvasWrapper')
    //         .boundingClientRect((rect) => {
    //             if (rect) {
    //                 const boxWidth = rect.width;
    //                 const boxHeight = boxWidth / (width / height);

    //                 console.log('boxWidth----:', boxWidth);
    //                 console.log('boxHeight----:', boxHeight);

    //                 this.initCanvas(boxHeight, boxWidth);
    //             }
    //         })
    //         .exec();
    // },

    initCanvas(boxWidth: number, boxHeight: number) {
        wx.createSelectorQuery()
            .select('#canvasContent')
            .fields({
                node: true,
                size: true,
            })
            .exec((res) => {
                if (res[0] && res[0].node) {
                    const canvas = res[0].node;
                    const ctx = canvas.getContext('2d');
                    if (ctx) {
                        this.canvas = canvas;
                        this.ctx = ctx;
                        const rect = res[0];
                        console.log('rect-----:', rect);
                        this.textDrawService = new TextDrawService(canvas, ctx);
                        // textDrawService.draw();
                        this.setData({ boxWidth, boxHeight });
                    }
                }
            });
    },

    tapCard(e: WechatMiniprogram.TouchEvent) {
        const { url } = e.currentTarget.dataset;
        console.log('navigateTo url:', url);
        wx.navigateTo({ url });
    },

    onConfirmInput(e: WechatMiniprogram.Input) {
        const { value } = e.detail;
        console.log('indexPage onConfirmInput value:', value);
        const characters = value.split('');
        const shuffledColors = [...WATER_COLORS.basic12].sort(
            () => Math.random() - 0.5,
        );
        const updatedCardList = characters.map((char, index) => ({
            color: shuffledColors[index % shuffledColors.length].hex,
            word: char,
        }));
        console.log('updatedCardList', updatedCardList);
        this.setData({ cardList: updatedCardList });
        // this.renderCanvas();
        this.textDrawService?.draw(updatedCardList);
    },

    deleteWordCard(e: WechatMiniprogram.CustomEvent) {
        const { key, word } = e.detail;
        console.log('deleteWordCard key:', key, 'word:', word);
        const { cardList } = this.data;
        const updatedCardList = cardList.filter((_, index) => index !== key);
        this.setData({ cardList: updatedCardList });
        wx.showToast({
            title: `已删除 "${word}"`,
            icon: 'none',
            duration: 2000,
        });
        // this.renderCanvas();
        this.textDrawService?.draw(updatedCardList);
    },
});