<script setup lang="ts">
import { ref } from 'vue';
import Button from 'primevue/button';
import * as path from '@tauri-apps/api/path';
import { open } from '@tauri-apps/plugin-dialog';
import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs';
import { invoke } from '../invoke';

const props = defineProps({
    filename: String,
    promptname: String,
    extension: String,
});

const exists = ref(false);
const contents = ref('');
const enabled = ref(false);
const target_path = ref('');

const load = async (p: string) => {
    try {
        contents.value = await readTextFile(p);
        exists.value = true;
    } catch (_) {
        exists.value = false;
    }
};

const save = async () => {
    if (target_path.value.length > 0) {
        await writeTextFile(target_path.value, contents.value);
    }
};

const filePick = async () => {
    const p = await open({
        multiple: false,
        directory: false,
        filters:
            props.promptname && props.extension
                ? [
                      {
                          name: props.promptname,
                          extensions: [props.extension],
                      },
                  ]
                : [],
    });
    if (p != null) {
        await load(p);
        await save();
    }
};

(async () => {
    const profileDir: string = await invoke('get_current_profile_dir');

    if (props.filename === undefined) {
        throw new Error('FileEditor without a filename');
    }

    target_path.value = await path.join(profileDir, props.filename);
    await load(target_path.value);
})();
</script>

<template>
    <Button v-if="!exists" icon="pi pi-plus" size="small" @click="filePick" />
    <div v-else>
        <Button
            v-if="exists"
            icon="pi pi-pen-to-square"
            size="small"
            @click="enabled = true"
        />
        <div v-if="enabled" class="backdrop">
            <textarea
                class="primitive-editor"
                @vue:mounted="$event.el.focus()"
                @input="(event) => (contents = (event.target as any).value)"
                @focusout="
                    save();
                    enabled = false;
                "
                >{{ contents }}</textarea
            >
        </div>
    </div>
</template>

<style lang="css">
.backdrop {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 900;
    width: 100vw;
    background-color: rgba(1, 1, 1, 0.7);
    height: 100vh;
}

.primitive-editor {
    font-family: monospace;
    white-space: nowrap;
    position: fixed;
    top: 10vh;
    left: 10vw;
    height: 80vh;
    width: 80vw;
    z-index: 1000;
    background-color: #151515;
    color: #ddd;
}
</style>
