<template>
    <div class="uk-margin-remove-first-child">
        <ul
            v-if="!isEmpty(storages)"
            class="uk-nav uk-nav-default yo-sidebar-marginless yo-nav-iconnav uk-margin uk-margin-remove-bottom"
        >
            <ResourceListItem
                v-for="{ storage, title, icon, meta, error, actions } in storages"
                :key="storage.id"
                :title="title"
                :icon="icon"
                :meta="meta"
                :actions="actions"
                :error="error"
                :disabled="Boolean(error)"
                @edit="edit(storage)"
                @copy="copy(storage)"
                @delete="remove(storage)"
            >
                <template v-if="error" #icon>
                    <span uk-icon="question" ratio="1.2"></span>
                </template>
            </ResourceListItem>
        </ul>

        <button
            :class="{ 'uk-margin-medium-top': !isEmpty(storages) }"
            class="uk-button uk-button-default uk-width-1-1"
            type="button"
            @click.prevent="add()"
        >
            {{ $t('New Storage') }}
        </button>

        <p class="uk-text-muted">
            {{ $t('Create virtual storages from local and external locations, used by Shared Locations and others.') }}
        </p>
    </div>
</template>

<script>
import Vue from 'vue';
import { isEmpty } from 'uikit-util';
import { deepCopy } from '@essentials/core/util';
import { ModalForm, ResourceListItem, ResourcePicker } from '@essentials/core/components';

export default {
    name: 'StoragesSection',

    components: {
        ResourceListItem,
    },

    inject: {
        StorageManager: {
            from: 'EssentialsStorage',
        },
    },

    props: {
        panel: Object,
    },

    computed: {
        storages() {
            return this.StorageManager.storages.map((storage) => {
                const adapter = this.StorageManager.adapters[storage?.adapter];
                const title = storage.name || adapter?.title || storage.adapter || this.$t('Unknown');

                const error = !adapter ? this.$t('Invalid Adapter') : '';

                return {
                    storage,
                    error,
                    title,
                    meta: !error ? adapter.title : '',
                    icon: adapter?.icon,
                    actions: error ? ['delete'] : ['copy', 'delete'],
                };
            });
        },
    },

    methods: {
        isEmpty,

        add() {
            this.$modal(ResourcePicker, { items: Object.values(this.StorageManager.adapters) })
                .show({ container: true })
                .then((adapter) => {
                    if (adapter) {
                        this.edit(Vue.observable({ adapter: adapter.name }));
                    }
                });
        },

        edit(values) {
            const panel = this.StorageManager.adapters[values.adapter];

            this.$modal(ModalForm, { values, panel })
                .show()
                .then((values) => {
                    values && this.StorageManager.save(values);
                });
        },

        remove(storage) {
            this.StorageManager.remove(storage);
        },

        // eslint-disable-next-line no-unused-vars
        copy({ id, ...storage }) {
            storage.name = storage.name ? `${storage.name} Copy` : '';
            this.StorageManager.save(deepCopy(storage));
        },
    },
};
</script>
