import {moduleId} from "../constants";
import DiceBox from "@3d-dice/dice-box-threejs/dist/dice-box-threejs.es"
import {getDiceSettings, setDiceSettings} from "./utils";

export class Customization extends FormApplication {

    constructor() {
        super(undefined);
    }

    override async _render(force?: boolean, options?: Application.RenderOptions<FormApplicationOptions>): Promise<any> {
        return super._render(force, options).then(() => {
            console.log("render")
            this.renderDicePreview();
        });
    }

    private renderDicePreview() {
        let diceSettings = getDiceSettings();
        let themeSelector = this.element.find("#theme");
        this.themes.forEach((value, key) => {
            themeSelector.append($(`<option value=${key}>${value}</option>`))
        })
        themeSelector.val(diceSettings.theme)
        this.element.find('#faceColor').val(diceSettings.faceColor)
        this.element.find('#numberColor').val(diceSettings.numberColor)
        this.element.find("#preview").on("click", async () => {
            this.element.find("#app").empty()
            this.diceBox = new DiceBox("#app", {
                assetPath: `modules/${moduleId}/`,
                light_intensity: 2,
                gravity_multiplier: 600,
                baseScale: 120,
                strength: Math.floor(Math.random() * 4),
            });
            await this.diceBox.initialize();
            this.diceBox.clearDice();
            await this.diceBox.updateConfig({
                theme_customColorset: {
                    background: this.element.find('#faceColor').val(),
                    foreground: this.element.find('#numberColor').val(),
                    texture: this.element.find('#theme').val()
                }
            });
            await this.diceBox.roll('5d6');
        })
        this.element.find("#preview").trigger("click")
        this.element.find("#save").on("click", async () => {
            await setDiceSettings({
                theme: this.element.find('#theme').val() as string,
                faceColor: this.element.find('#faceColor').val() as string,
                numberColor: this.element.find('#numberColor').val() as string
            })
        })
    }

    private diceBox: typeof DiceBox

    static override get defaultOptions(): FormApplicationOptions {
        return foundry.utils.mergeObject(super.defaultOptions, {
            id: "dice-tower-customization",
            title: "DICETOWER.customizeTitle",
            template: `modules/${moduleId}/templates/dice-tower-customization.hbs`,
            width: 600,
            height: 620,
        }) as FormApplicationOptions;
    }

    protected _updateObject(_event: Event, _formData: object | undefined): Promise<unknown> {
        return Promise.resolve(undefined);
    }

    themes = new Map([
        ["cloudy", "Clouds (Transparent)"],
        ["cloudy_2", "Clouds"],
        ["fire", "Fire"],
        ["marble", "Marble"],
        ["water", "Water"],
        ["ice", "Ice"],
        ["paper", "Paper"],
        ["speckles", "Speckles"],
        ["glitter", "Glitter"],
        ["glitter_2", "Glitter (Transparent)"],
        ["stars", "Stars"],
        ["stainedglass", "Stained Glass"],
        ["wood", "Wood"],
        ["metal", "Stainless Steel"],
        ["skulls", "Skulls"],
        ["leopard", "Leopard"],
        ["tiger", "Tiger"],
        ["cheetah", "Cheetah"],
        ["dragon", "Dragon"],
        ["lizard", "Lizard"],
        ["bird", "Bird"],
        ["astral", "Astral Sea"],
        ["bronze01", "Bronze 1"],
        ["bronze02", "Bronze 2"],
        ["bronze03", "Bronze 3"],
        ["bronze03a", "Bronze 3a"],
        ["bronze03b", "Bronze 3b"],
        ["bronze04", "Bronze 4"],
        ["none", "none"]
    ]);

}
