<template>
    <v-dialog fullscreen hide-overlay scrollable lazy
              v-model="show" persistent class="p-photo-edit-dialog" @keydown.esc="close">
        <v-card color="application">
            <v-toolbar dark color="navigation">
                <v-btn icon dark @click.stop="close" class="action-close">
                    <v-icon>close</v-icon>
                </v-btn>
                <v-toolbar-title>{{ title }}
                    <v-icon v-if="isPrivate" title="Private">lock</v-icon>
                </v-toolbar-title>
                <v-spacer></v-spacer>
                <v-toolbar-items v-if="selection.length > 1">
                    <v-btn icon disabled @click.stop="prev" :disabled="selected < 1" class="action-previous">
                        <v-icon>navigate_before</v-icon>
                    </v-btn>

                    <v-btn icon @click.stop="next" :disabled="selected >= selection.length - 1" class="action-next">
                        <v-icon>navigate_next</v-icon>
                    </v-btn>
                </v-toolbar-items>
            </v-toolbar>
            <v-tabs
                    v-model="active"
                    flat
                    grow
                    color="secondary"
                    slider-color="secondary-dark"
                    height="64"
                    class="form"
            >
                <v-tab id="tab-edit" ripple>
                    <translate key="Details">Details</translate>
                </v-tab>

                <v-tab id="tab-labels" ripple :disabled="!$config.feature('labels')">
                    <translate key="Labels">Labels</translate>
                </v-tab>

                <v-tab id="tab-files" ripple>
                    <translate key="Files">Files</translate>
                </v-tab>

                <v-tab id="tab-info" ripple v-if="$config.feature('edit')">
                    <v-icon>settings</v-icon>
                </v-tab>

                <v-tabs-items touchless>
                    <v-tab-item>
                        <p-tab-photo-edit :model="model" ref="edit"
                                          @close="close" @prev="prev" @next="next"></p-tab-photo-edit>
                    </v-tab-item>

                    <v-tab-item lazy>
                        <p-tab-photo-labels :model="model" @close="close"></p-tab-photo-labels>
                    </v-tab-item>

                    <v-tab-item lazy>
                        <p-tab-photo-files :model="model" @close="close"></p-tab-photo-files>
                    </v-tab-item>

                    <v-tab-item lazy v-if="$config.feature('edit')">
                        <p-tab-photo-info :model="model" @close="close"></p-tab-photo-info>
                    </v-tab-item>
                </v-tabs-items>
            </v-tabs>
        </v-card>
    </v-dialog>
</template>
<script>
    import Photo from "../model/photo";
    import PhotoEdit from "./photo/edit.vue";
    import PhotoLabels from "./photo/labels.vue";
    import PhotoFiles from "./photo/files.vue";
    import PhotoInfo from "./photo/info.vue";

    export default {
        name: 'p-photo-edit-dialog',
        props: {
            index: Number,
            show: Boolean,
            selection: Array,
            album: Object,
        },
        components: {
            'p-tab-photo-edit': PhotoEdit,
            'p-tab-photo-labels': PhotoLabels,
            'p-tab-photo-files': PhotoFiles,
            'p-tab-photo-info': PhotoInfo,
        },
        computed: {
            title: function () {
                if (this.model && this.model.Title) {
                    return this.model.Title
                }

                this.$gettext("Edit Photo");
            },
            isPrivate: function () {
                if (this.model && this.model.Private && this.$config.settings().features.private) {
                    return this.model.Private
                }

                return false;
            },
        },
        data() {
            return {
                selected: 0,
                selectedId: "",
                model: new Photo,
                loading: false,
                search: null,
                items: [],
                readonly: this.$config.get("readonly"),
                active: this.tab,
            }
        },
        methods: {
            changePath: function (path) {
                /* if (this.$route.path !== path) {
                    this.$router.replace(path)
                } */
            },
            close() {
                this.$emit('close');
            },
            prev() {
                if (this.selected > 0) {
                    this.find(this.selected - 1);
                }
            },
            next() {
                if (this.selected < this.selection.length) {
                    this.find(this.selected + 1);
                }
            },
            find(index) {
                if (this.loading) {
                    return;
                }

                if (!this.selection || !this.selection[index]) {
                    this.$notify.error("Invalid photo selected");
                    return
                }

                this.loading = true;
                this.selected = index;
                this.selectedId = this.selection[index];

                this.model.find(this.selectedId).then(model => {
                    model.refreshFileAttr();
                    this.model = model;
                    this.$refs.edit.refresh(model);
                    this.loading = false;
                }).catch(() => this.loading = false);
            },
        },
        watch: {
            show: function (show) {
                if (show) {
                    this.find(this.index);
                }
            }
        },
    }
</script>
