import { createApp } from "vue";
import { createStore } from "vuex"
import AudioPlayback from "./js/AudioPlaybackModule";
import App from "./App.vue";
import ToggleButton from "./components/ToggleButton.vue"

export class TranscriptionViewModel {
    /**
     * Initialises a new instance of the {@link TranscriptionViewModel} class.
     *
     * @param {TranscriptionModel} transcription
     * @param {File} file The file from which the transcription was generated.
     */
    constructor(transcription, file) {
        /** @type {String} The UUID of this transcription. */
        this.id = TranscriptionViewModel.getId(file); // Should be a fairly reliable indicator of uniqueness.

        /** @type {String} The transcription. */
        this.transcription = transcription.transcription;

        /** @type {String} The name of the file from which the transcription was generated. */
        this.fileName = transcription.file_name;

        /** @type {TranscriptionMetadata[]} The transcription metadata. */
        this.metadata = transcription.metadata;

        /** @type {File} The file from which the transcription was generated. */
        this.file = file;
    }

    static getId(file) {
        return file.name + file.size + file.type;
    }
}

export class PlaybackState {
    /**
     * Initialises a new instance of the {@link PlaybackState} class.
     * @param {String} id The ID of the transcription for which audio is being played.
     * @param {Boolean} isPlaying A value indicating if audio is currently being played.
     * @param {Number} currentTime The current time in the audio playback.
     * @param {Number} length The length of the audio track.
     */
    constructor(id = "", isPlaying = false, length = 0) {
        /** @type {String} The ID of the transcription for which audio is currently being played. */
        this.id = id;

        /** @type {Boolean} Gets a value indicating if audio is currently being played back. */
        this.isPlaying = isPlaying;

        /** @type {Map<String, Number} The current playback time of each transcription's audio. */
        this.playbackTimes = new Map();

        /** @type {Map<String, Number} The length of each transcription's audio. */
        this.playbackLengths = new Map();
    }
}

export class TranscriptionExistsError extends Error {
    constructor(message = "", ...args) {
        super(message, ...args);
    }
}

const store = createStore({
    state() {
        return {
            /** @type {Map<String, String>} */
            translations: new Map(),
            /** @type {Map<String, TranscriptionViewModel>} */
            rawTranscriptions: new Map(),
            playbackState: new PlaybackState()
        }
    },
    mutations: {
        /**
         * Adds a new transcription to the store.
         * @param {*} state The state of the store.
         * @param {TranscriptionViewModel} transcription The transcription's view model object.
         */
        rawTranscriptionAdd(state, transcription) {
            if (state.rawTranscriptions.has(transcription.id)) {
                throw new TranscriptionExistsError("Cannot add the transcription because it already exists.");
            }
            state.rawTranscriptions.set(transcription.id, transcription);
        },

        /**
         * Removes a transcription from the store.
         * @param {*} state The state of the store.
         * @param {String} id The ID of the transcription.
         */
        rawTranscriptionRemove(state, id) {
            state.rawTranscriptions.delete(id);
        },

        playbackStateSetID(state, id) {
            state.playbackState.id = id;
        },
        playbackStateSetIsPlaying(state, isPlaying) {
            state.playbackState.isPlaying = isPlaying;
        },
        playbackStateSetTime(state, object) {
            state.playbackState.playbackTimes.set(object.id, object.time);
        },
        playbackStateSetLength(state, object) {
            state.playbackState.playbackLengths.set(object.id, object.time);
        },

        setTranslations(state, translations) {
            state.translations = translations;
        }
    },
    getters: {
        hasTranscriptionOfFile: (state) => (file) => {
            const id = TranscriptionViewModel.getId(file);
            return state.rawTranscriptions.has(id);
        },
        transcriptionPlaybackTime: (state) => (id) => {
            return state.playbackState.playbackTimes.has(id) ? state.playbackState.playbackTimes.get(id) : 0;
        },
        transcriptionPlaybackLength: (state) => (id) => {
            return state.playbackState.playbackLengths.has(id) ? state.playbackState.playbackLengths.get(id) : 0;
        }
    }
});

AudioPlayback.initialise(store);

const app = createApp(App);

app.use(store)
    .component("ToggleButton", ToggleButton)
    .directive("width", {
        mounted(el, binding) {
            binding.value(el.offsetWidth);

            window.addEventListener("resize", function() {
                binding.value(el.offsetWidth);
            });
        }
    })
    .mount("#app");

/* === Get interface translations === */

/** @type {Map<String, String>} */
const translations = new Map();

/* We might be running under Greenstone, so pull the tranlsations from there if so */
/* eslint-disable no-undef */
if (typeof gs !== "undefined" && gs.text && gs.text.atea) {
    for (const key in gs.text.atea) {
        translations.set(key, gs.text.atea[key]);
    }

    store.commit("setTranslations", translations)
}
/* eslint-enable no-undef */
else {
    fetch("resources/interface_atea.properties")
        .then(async response => {
            const responseText = await response.text();
            const responseTranslations = responseText.split("\n");

            for (const translation of responseTranslations) {
                const components = translation.split("=");

                if (components[0] === "") {
                    continue;
                }

                const namespaceEndIndex = components[0].lastIndexOf(".");
                translations.set(components[0].slice(namespaceEndIndex + 1), components.slice(1).join("="));
            }

            store.commit("setTranslations", translations)
        });
}