import tinycolor from "tinycolor2";
import { Hpml } from "./evaluator";
import { values, utils } from "@syuilo/aiscript";
import { Fn, HpmlScope } from ".";
import { Expr } from "./expr";
import seedrandom from "seedrandom";

/* TODO: https://www.chartjs.org/docs/latest/configuration/canvas-background.html#color
// https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs
Chart.pluginService.register({
	beforeDraw: (chart, easing) => {
		if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
			const ctx = chart.chart.ctx;
			ctx.save();
			ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
			ctx.fillRect(0, 0, chart.chart.width, chart.chart.height);
			ctx.restore();
		}
	}
});
*/

export function initAiLib(hpml: Hpml) {
    return {
        "MkPages:updated": values.FN_NATIVE(([callback]) => {
            hpml.pageVarUpdatedCallback = callback as values.VFn;
        }),
        "MkPages:get_canvas": values.FN_NATIVE(([id]) => {
            utils.assertString(id);
            const canvas = hpml.canvases[id.value];
            const ctx = canvas.getContext("2d");
            return values.OBJ(
                new Map([
                    [
                        "clear_rect",
                        values.FN_NATIVE(([x, y, width, height]) => {
                            ctx.clearRect(
                                x.value,
                                y.value,
                                width.value,
                                height.value
                            );
                        }),
                    ],
                    [
                        "fill_rect",
                        values.FN_NATIVE(([x, y, width, height]) => {
                            ctx.fillRect(
                                x.value,
                                y.value,
                                width.value,
                                height.value
                            );
                        }),
                    ],
                    [
                        "stroke_rect",
                        values.FN_NATIVE(([x, y, width, height]) => {
                            ctx.strokeRect(
                                x.value,
                                y.value,
                                width.value,
                                height.value
                            );
                        }),
                    ],
                    [
                        "fill_text",
                        values.FN_NATIVE(([text, x, y, width]) => {
                            ctx.fillText(
                                text.value,
                                x.value,
                                y.value,
                                width ? width.value : undefined
                            );
                        }),
                    ],
                    [
                        "stroke_text",
                        values.FN_NATIVE(([text, x, y, width]) => {
                            ctx.strokeText(
                                text.value,
                                x.value,
                                y.value,
                                width ? width.value : undefined
                            );
                        }),
                    ],
                    [
                        "set_line_width",
                        values.FN_NATIVE(([width]) => {
                            ctx.lineWidth = width.value;
                        }),
                    ],
                    [
                        "set_font",
                        values.FN_NATIVE(([font]) => {
                            ctx.font = font.value;
                        }),
                    ],
                    [
                        "set_fill_style",
                        values.FN_NATIVE(([style]) => {
                            ctx.fillStyle = style.value;
                        }),
                    ],
                    [
                        "set_stroke_style",
                        values.FN_NATIVE(([style]) => {
                            ctx.strokeStyle = style.value;
                        }),
                    ],
                    [
                        "begin_path",
                        values.FN_NATIVE(() => {
                            ctx.beginPath();
                        }),
                    ],
                    [
                        "close_path",
                        values.FN_NATIVE(() => {
                            ctx.closePath();
                        }),
                    ],
                    [
                        "move_to",
                        values.FN_NATIVE(([x, y]) => {
                            ctx.moveTo(x.value, y.value);
                        }),
                    ],
                    [
                        "line_to",
                        values.FN_NATIVE(([x, y]) => {
                            ctx.lineTo(x.value, y.value);
                        }),
                    ],
                    [
                        "arc",
                        values.FN_NATIVE(
                            ([x, y, radius, startAngle, endAngle]) => {
                                ctx.arc(
                                    x.value,
                                    y.value,
                                    radius.value,
                                    startAngle.value,
                                    endAngle.value
                                );
                            }
                        ),
                    ],
                    [
                        "rect",
                        values.FN_NATIVE(([x, y, width, height]) => {
                            ctx.rect(
                                x.value,
                                y.value,
                                width.value,
                                height.value
                            );
                        }),
                    ],
                    [
                        "fill",
                        values.FN_NATIVE(() => {
                            ctx.fill();
                        }),
                    ],
                    [
                        "stroke",
                        values.FN_NATIVE(() => {
                            ctx.stroke();
                        }),
                    ],
                ])
            );
        }),
        "MkPages:chart": values.FN_NATIVE(([id, opts]) => {
            /* TODO
			utils.assertString(id);
			utils.assertObject(opts);
			const canvas = hpml.canvases[id.value];
			const color = getComputedStyle(document.documentElement).getPropertyValue('--accent');
			Chart.defaults.color = '#555';
			const chart = new Chart(canvas, {
				type: opts.value.get('type').value,
				data: {
					labels: opts.value.get('labels').value.map(x => x.value),
					datasets: opts.value.get('datasets').value.map(x => ({
						label: x.value.has('label') ? x.value.get('label').value : '',
						data: x.value.get('data').value.map(x => x.value),
						pointRadius: 0,
						lineTension: 0,
						borderWidth: 2,
						borderColor: x.value.has('color') ? x.value.get('color') : color,
						backgroundColor: tinycolor(x.value.has('color') ? x.value.get('color') : color).setAlpha(0.1).toRgbString(),
					}))
				},
				options: {
					responsive: false,
					devicePixelRatio: 1.5,
					title: {
						display: opts.value.has('title'),
						text: opts.value.has('title') ? opts.value.get('title').value : '',
						fontSize: 14,
					},
					layout: {
						padding: {
							left: 32,
							right: 32,
							top: opts.value.has('title') ? 16 : 32,
							bottom: 16
						}
					},
					legend: {
						display: opts.value.get('datasets').value.filter(x => x.value.has('label') && x.value.get('label').value).length === 0 ? false : true,
						position: 'bottom',
						labels: {
							boxWidth: 16,
						}
					},
					tooltips: {
						enabled: false,
					},
					chartArea: {
						backgroundColor: '#fff'
					},
					...(opts.value.get('type').value === 'radar' ? {
						scale: {
							ticks: {
								display: opts.value.has('show_tick_label') ? opts.value.get('show_tick_label').value : false,
								min: opts.value.has('min') ? opts.value.get('min').value : undefined,
								max: opts.value.has('max') ? opts.value.get('max').value : undefined,
								maxTicksLimit: 8,
							},
							pointLabels: {
								fontSize: 12
							}
						}
					} : {
						scales: {
							yAxes: [{
								ticks: {
									display: opts.value.has('show_tick_label') ? opts.value.get('show_tick_label').value : true,
									min: opts.value.has('min') ? opts.value.get('min').value : undefined,
									max: opts.value.has('max') ? opts.value.get('max').value : undefined,
								}
							}]
						}
					})
				}
			});
			*/
        }),
    };
}

export const funcDefs: Record<
    string,
    { in: any[]; out: any; category: string; icon: any }
> = {
    if: {
        in: ["boolean", 0, 0],
        out: 0,
        category: "flow",
        icon: "ph-share-network ph-bold ph-lg",
    },
    for: {
        in: ["number", "function"],
        out: null,
        category: "flow",
        icon: "ph-recycle ph-bold ph-lg",
    },
    not: {
        in: ["boolean"],
        out: "boolean",
        category: "logical",
        icon: "ph-flag ph-bold ph-lg",
    },
    or: {
        in: ["boolean", "boolean"],
        out: "boolean",
        category: "logical",
        icon: "ph-flag ph-bold ph-lg",
    },
    and: {
        in: ["boolean", "boolean"],
        out: "boolean",
        category: "logical",
        icon: "ph-flag ph-bold ph-lg",
    },
    add: {
        in: ["number", "number"],
        out: "number",
        category: "operation",
        icon: "ph-plus ph-bold ph-lg",
    },
    subtract: {
        in: ["number", "number"],
        out: "number",
        category: "operation",
        icon: "ph-minus ph-bold ph-lg",
    },
    multiply: {
        in: ["number", "number"],
        out: "number",
        category: "operation",
        icon: "ph-x ph-bold ph-lg",
    },
    divide: {
        in: ["number", "number"],
        out: "number",
        category: "operation",
        icon: "ph-divide ph-bold ph-lg",
    },
    mod: {
        in: ["number", "number"],
        out: "number",
        category: "operation",
        icon: "ph-divide ph-bold ph-lg",
    },
    round: {
        in: ["number"],
        out: "number",
        category: "operation",
        icon: "ph-calculator ph-bold ph-lg",
    },
    eq: {
        in: [0, 0],
        out: "boolean",
        category: "comparison",
        icon: "ph-equals ph-bold ph-lg",
    },
    notEq: {
        in: [0, 0],
        out: "boolean",
        category: "comparison",
        icon: "ph-prohibit-insert ph-bold ph-lg",
    },
    gt: {
        in: ["number", "number"],
        out: "boolean",
        category: "comparison",
        icon: "ph-caret-right ph-bold ph-lg",
    },
    lt: {
        in: ["number", "number"],
        out: "boolean",
        category: "comparison",
        icon: "ph-caret-left ph-bold ph-lg",
    },
    gtEq: {
        in: ["number", "number"],
        out: "boolean",
        category: "comparison",
        icon: "ph-caret-double-right ph-bold ph-lg",
    },
    ltEq: {
        in: ["number", "number"],
        out: "boolean",
        category: "comparison",
        icon: "ph-caret-double-right ph-bold ph-lg",
    },
    strLen: {
        in: ["string"],
        out: "number",
        category: "text",
        icon: "ph-quotes ph-bold ph-lg",
    },
    strPick: {
        in: ["string", "number"],
        out: "string",
        category: "text",
        icon: "ph-quotes ph-bold ph-lg",
    },
    strReplace: {
        in: ["string", "string", "string"],
        out: "string",
        category: "text",
        icon: "ph-quotes ph-bold ph-lg",
    },
    strReverse: {
        in: ["string"],
        out: "string",
        category: "text",
        icon: "ph-quotes ph-bold ph-lg",
    },
    join: {
        in: ["stringArray", "string"],
        out: "string",
        category: "text",
        icon: "ph-quotes ph-bold ph-lg",
    },
    stringToNumber: {
        in: ["string"],
        out: "number",
        category: "convert",
        icon: "ph-swap ph-bold ph-lg",
    },
    numberToString: {
        in: ["number"],
        out: "string",
        category: "convert",
        icon: "ph-swap ph-bold ph-lg",
    },
    splitStrByLine: {
        in: ["string"],
        out: "stringArray",
        category: "convert",
        icon: "ph-swap ph-bold ph-lg",
    },
    pick: {
        in: [null, "number"],
        out: null,
        category: "list",
        icon: "ph-text-indent ph-bold ph-lg",
    },
    listLen: {
        in: [null],
        out: "number",
        category: "list",
        icon: "ph-text-indent ph-bold ph-lg",
    },
    rannum: {
        in: ["number", "number"],
        out: "number",
        category: "random",
        icon: "ph-dice-five ph-bold ph-lg",
    },
    dailyRannum: {
        in: ["number", "number"],
        out: "number",
        category: "random",
        icon: "ph-dice-five ph-bold ph-lg",
    },
    seedRannum: {
        in: [null, "number", "number"],
        out: "number",
        category: "random",
        icon: "ph-dice-five ph-bold ph-lg",
    },
    random: {
        in: ["number"],
        out: "boolean",
        category: "random",
        icon: "ph-dice-five ph-bold ph-lg",
    },
    dailyRandom: {
        in: ["number"],
        out: "boolean",
        category: "random",
        icon: "ph-dice-five ph-bold ph-lg",
    },
    seedRandom: {
        in: [null, "number"],
        out: "boolean",
        category: "random",
        icon: "ph-dice-five ph-bold ph-lg",
    },
    randomPick: {
        in: [0],
        out: 0,
        category: "random",
        icon: "ph-dice-five ph-bold ph-lg",
    },
    dailyRandomPick: {
        in: [0],
        out: 0,
        category: "random",
        icon: "ph-dice-five ph-bold ph-lg",
    },
    seedRandomPick: {
        in: [null, 0],
        out: 0,
        category: "random",
        icon: "ph-dice-five ph-bold ph-lg",
    },
    DRPWPM: {
        in: ["stringArray"],
        out: "string",
        category: "random",
        icon: "ph-dice-five ph-bold ph-lg",
    }, // dailyRandomPickWithProbabilityMapping
};

export function initHpmlLib(
    expr: Expr,
    scope: HpmlScope,
    randomSeed: string,
    visitor?: any
) {
    const date = new Date();
    const day = `${visitor ? visitor.id : ""} ${date.getFullYear()}/${
        date.getMonth() + 1
    }/${date.getDate()}`;

    // SHOULD be fine to ignore since it's intended + function shape isn't defined
    const funcs: Record<string, Function> = {
        not: (a: boolean) => !a,
        or: (a: boolean, b: boolean) => a || b,
        and: (a: boolean, b: boolean) => a && b,
        eq: (a: any, b: any) => a === b,
        notEq: (a: any, b: any) => a !== b,
        gt: (a: number, b: number) => a > b,
        lt: (a: number, b: number) => a < b,
        gtEq: (a: number, b: number) => a >= b,
        ltEq: (a: number, b: number) => a <= b,
        if: (bool: boolean, a: any, b: any) => (bool ? a : b),
        for: (times: number, fn: Fn) => {
            const result: any[] = [];
            for (let i = 0; i < times; i++) {
                result.push(
                    fn.exec({
                        [fn.slots[0]]: i + 1,
                    })
                );
            }
            return result;
        },
        add: (a: number, b: number) => a + b,
        subtract: (a: number, b: number) => a - b,
        multiply: (a: number, b: number) => a * b,
        divide: (a: number, b: number) => a / b,
        mod: (a: number, b: number) => a % b,
        round: (a: number) => Math.round(a),
        strLen: (a: string) => a.length,
        strPick: (a: string, b: number) => a[b - 1],
        strReplace: (a: string, b: string, c: string) => a.split(b).join(c),
        strReverse: (a: string) => a.split("").reverse().join(""),
        join: (texts: string[], separator: string) =>
            texts.join(separator || ""),
        stringToNumber: (a: string) => parseInt(a),
        numberToString: (a: number) => a.toString(),
        splitStrByLine: (a: string) => a.split("\n"),
        pick: (list: any[], i: number) => list[i - 1],
        listLen: (list: any[]) => list.length,
        random: (probability: number) =>
            Math.floor(seedrandom(`${randomSeed}:${expr.id}`)() * 100) <
            probability,
        rannum: (min: number, max: number) =>
            min +
            Math.floor(
                seedrandom(`${randomSeed}:${expr.id}`)() * (max - min + 1)
            ),
        randomPick: (list: any[]) =>
            list[
                Math.floor(
                    seedrandom(`${randomSeed}:${expr.id}`)() * list.length
                )
            ],
        dailyRandom: (probability: number) =>
            Math.floor(seedrandom(`${day}:${expr.id}`)() * 100) < probability,
        dailyRannum: (min: number, max: number) =>
            min +
            Math.floor(seedrandom(`${day}:${expr.id}`)() * (max - min + 1)),
        dailyRandomPick: (list: any[]) =>
            list[Math.floor(seedrandom(`${day}:${expr.id}`)() * list.length)],
        seedRandom: (seed: any, probability: number) =>
            Math.floor(seedrandom(seed)() * 100) < probability,
        seedRannum: (seed: any, min: number, max: number) =>
            min + Math.floor(seedrandom(seed)() * (max - min + 1)),
        seedRandomPick: (seed: any, list: any[]) =>
            list[Math.floor(seedrandom(seed)() * list.length)],
        DRPWPM: (list: string[]) => {
            const xs: any[] = [];
            let totalFactor = 0;
            for (const x of list) {
                const parts = x.split(" ");
                const factor = parseInt(parts.pop()!, 10);
                const text = parts.join(" ");
                totalFactor += factor;
                xs.push({ factor, text });
            }
            const r = seedrandom(`${day}:${expr.id}`)() * totalFactor;
            let stackedFactor = 0;
            for (const x of xs) {
                if (r >= stackedFactor && r <= stackedFactor + x.factor) {
                    return x.text;
                } else {
                    stackedFactor += x.factor;
                }
            }
            return xs[0].text;
        },
    };

    return funcs;
}