<script setup lang="ts">
import DynamicComponent from '@/components/DynamicComponent.vue';
import type { OptionalDynamicComponentData } from '@/composables/dynamic.ts';
import { ref, watchEffect } from 'vue';
import { parseJsonString, toJsonString } from '@/composables/json.ts';

const data = ref<OptionalDynamicComponentData>({ type: 'none' });

const panel_id = ref<string | null>(null);
const panel_name = ref<string>('Untitled Panel');
const loading = ref(false);

const selected = ref<symbol>();
const panel_list = ref<{ name: string; id: string }[]>([]);
const load_screen = ref(true);

const unselect = () => {
    selected.value = undefined;
};

async function reload_panel_list() {
    const res = await fetch(`/api/panel`);
    panel_list.value = await res.json();
}
watchEffect(reload_panel_list);

async function load(id: string) {
    data.value = { type: 'none' };
    load_screen.value = false;
    loading.value = true;
    const panel_data = await fetch(`/api/panel/${id}`);
    const panel_json_value = await panel_data.json();
    data.value = parseJsonString(
        panel_json_value['data'],
    ) as OptionalDynamicComponentData;
    panel_name.value = panel_json_value['name'];
    panel_id.value = id;
    loading.value = false;
}
async function newPanel() {
    data.value = { type: 'none' };
    panel_name.value = 'Untitled Panel';
    panel_id.value = null;
    loading.value = false;
    load_screen.value = false;
}

async function save() {
    loading.value = true;
    const panel_id_value = panel_id.value;
    if (panel_id_value) {
        const res = await fetch(`/api/panel/${panel_id_value}`, {
            method: 'PUT',
            body: toJsonString({
                name: panel_name.value,
                data: toJsonString(data.value),
            }),
            headers: {
                'Content-Type': 'application/json',
            },
        });
        await res.json();
    } else {
        const res = await fetch('/api/panel', {
            method: 'POST',
            body: toJsonString({
                name: panel_name.value,
                data: toJsonString(data.value),
            }),
            headers: {
                'Content-Type': 'application/json',
            },
        });
        const uuid = await res.json();
        panel_id.value = uuid as string;
    }
    loading.value = false;
}

async function showLoadScreen() {
    load_screen.value = true;
    await reload_panel_list();
}
</script>

<template>
    <div v-if="load_screen" class="column grow">
        <div class="row">
            <button @click.stop.prevent="newPanel">New</button>
        </div>
        <div v-for="panel of panel_list" :key="panel.id" class="row">
            <button @click.stop.prevent="() => load(panel.id)">Load</button>
            <span>
                {{ panel.name }}
            </span>
        </div>
    </div>
    <div v-else class="row grow">
        <div class="panel-content scroll no-min-height" @click="unselect">
            <DynamicComponent
                v-model:data="data"
                :editable="true"
                v-model:selection="selected"
            ></DynamicComponent>
        </div>
        <div id="sidebar" class="column">
            <div class="row">
                <label>Name:</label>
                <input :disabled="loading" type="text" v-model="panel_name" />
            </div>
            <div class="row">
                <button :disabled="loading" @click.prevent.stop="save">
                    {{ panel_id ? 'Save' : 'New' }}
                </button>
                <button @click.prevent.stop="showLoadScreen">Load</button>
            </div>
            <div id="inspector" class="column"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use '@/assets/variables';

#sidebar {
    width: 25%;
    height: 100vh;
    background: variables.$dark-background-color;
}
</style>
