<template>
    <main class="preferences layout-block">
        <router-link to="/" class="back"><- Back</router-link>

        <h1 class="mono">Storage Plugin</h1>

        <div v-for="plugin in plugins" class="plugin" :key="plugin.id">
            <input
                v-model="activePluginId"
                name="plugins"
                type="radio"
                :id="plugin.id"
                :value="plugin.id"
            />
            <div class="info">
                <p class="name bold">{{ plugin.name }}</p>
                <p class="description">{{ plugin.description }}</p>

                <form v-if="plugin.configSchema.length" class="config">
                    <div
                        v-for="field in plugin.configSchema"
                        class="config-field"
                        :key="field.key"
                    >
                        <label :for="field.key">
                            {{ field.label }}
                        </label>
                        <input
                            v-model="config.adapters[plugin.id][field.key]"
                            :id="field.key"
                            :type="field.type"
                            :placeholder="field.default"
                            :required="field.required"
                        />
                    </div>
                </form>
            </div>
        </div>
    </main>
</template>

<script setup>
import usePlugins from '@/composables/usePlugins'
import useConfig from '@/composables/useConfig'
import { ref, watch } from 'vue'

const { plugins, setActivePlugin } = await usePlugins()
const { config, ensureConfig } = useConfig()
await ensureConfig()

const activePluginId = ref(config.value.activeAdapter)

watch(activePluginId, async (id) => {
    await setActivePlugin(id)
})
</script>

<style lang="scss">
.preferences {
    padding-top: 8px;

    .back {
        opacity: 0.25;
        display: block;
        margin-top: 9px;
        margin-bottom: 14px;
    }

    h1 {
        margin-bottom: 20px;
    }

    .plugin {
        display: flex;
        margin-bottom: 16px;
    }

    input[type='radio'] {
        display: block;
        flex-shrink: 0;
        width: 10px;
        height: 10px;
        margin-right: 10px;
        border: 1px solid white;
        cursor: pointer;

        &:checked {
            background-color: white;
        }
    }

    .info {
        .description {
            color: var(--grey-100);
            margin-top: 6px;
        }
    }

    .config {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 16px;
    }
    .config-field {
        display: flex;
        flex-direction: column;
        gap: 4px;

        input {
            width: 100%;
            border: 1px solid var(--grey-100);
            border-radius: 0.2em;
            padding: 0.2em 0.5em;
        }
    }
}
</style>
