<template>
    <div>
        <f-select id="connection" v-model="innerConnection" label="Verbindung" name="connection" class="mt-2" :options="data"></f-select>

        <div v-if="innerConnection" class="mt-4">
            <div class="flex space-x-3 items-center bg-zinc-700 rounded-lg mt-3 py-1 px-2">
                <ui-sprite class="w-4 h-4 text-primary-700" src="open-folder"></ui-sprite>
                <div class="text-sm grow" v-text="structure.parent"></div>
                <ui-icon-button icon="undo" @click="emit('input', null)">löschen</ui-icon-button>
                <ui-icon-button icon="undo" @click="updateFiles(getParentDir(structure.parent))">Zurück</ui-icon-button>
            </div>
            <a
                v-for="(file, index) in structure.files"
                :key="index"
                href="#"
                class="flex space-x-3 items-center mt-1 transition duration-200 hover:bg-zinc-600 py-1 px-2 rounded"
                @click.prevent="updateFiles(file.path)"
            >
                <ui-sprite class="w-8 h-8 text-primary-700" src="open-folder"></ui-sprite>
                <span class="grow" :value="file.name">
                    {{ file.name }}
                </span>
                <button class="btn btn-primary btn-sm" @click.self.prevent.stop="select(file)">Auswählen</button>
                <ui-sprite class="w-3 h-3 -rotate-90 text-primary-400" src="chevron"></ui-sprite>
            </a>
        </div>
    </div>
</template>

<script setup>
import {ref, watch} from 'vue';
import {useApiIndex} from '../../composables/useApiIndex';

const {reload, data, axios} = useApiIndex('/api/fileshare');

const emit = defineEmits(['input']);

const props = defineProps({
    value: {
        validator: (v) => typeof v === 'object' || v === null,
        required: true,
    },
});

const innerConnection = ref(props.value === null ? null : props.value.connection_id);

const structure = ref({
    parent: props.value === null ? '/' : getParentDir(props.value.resource),
    files: [],
});

function select(file) {
    emit('input', {
        connection_id: innerConnection.value,
        resource: file.path,
    });
}

function getParentDir(dir) {
    if (!dir) {
        return '/';
    }
    return '/' + dir.split('/').slice(1, -1).join('/');
}

watch(innerConnection, () => updateFiles('/'));

async function updateFiles(parentDir) {
    console.log(innerConnection);
    if (innerConnection.value === null) {
        structure.value = {
            parent: '/',
            files: [],
        };
        return;
    }

    const response = await axios.post(`/api/fileshare/${innerConnection.value}/files`, {
        parent: parentDir,
    });

    structure.value = {
        parent: parentDir,
        files: response.data.data,
    };
}

await reload();
updateFiles(structure.value.parent);
</script>