<template>
    <v-menu
        transition="slide-y-transition"
        :close-on-content-click="false"
        bottom
        :disabled="disabled"
        v-model="visible"
    >
        <template #activator="{ on: onMenu }">
            <v-tooltip 
                bottom 
                :disabled="visible || ! showTooltip"
            >
                <template #activator="{ on: onTooltip }">
                    <v-btn
                        :color="file.mystatus.color"
                        x-small
                        text
                        class="text-no-transform ma-0 pa-0"
                        :disabled="false"
                        :title="__(file.mystatus.name)"
                        v-on="{...onMenu, ...onTooltip}"
                    >
                        <v-icon small>
                            {{ file.mystatus.props.icon }} 
                        </v-icon>

                        <span v-if="false">
                            {{ __(file.mystatus.name) }}
                        </span>
                    </v-btn>
                </template>

                <span class="text-caption">
                    {{ __(file.mystatus.name) }} 
                </span>
            </v-tooltip>
        </template>

        <v-card
            width="300"
        >   
            <v-card-text class="py-2">
                <v-radio-group
                    v-model="newStatus"
                    dense
                    hide-details
                    class="ma-0"
                >
                    <v-radio
                        v-for="(status, index) in fileStatuses"
                        :key="'index-' + index"
                        :label="status.text"
                        :value="status.value"
                    >
                    </v-radio>
                </v-radio-group>
            </v-card-text>

            <v-card-actions>
                <cs-btn
                    caption="Schimbă"
                    outlined
                    :click="OnClickChange"
                />
                <v-spacer></v-spacer>
                <cs-btn-cancel 
                    :click="() => visible = false"
                />
            </v-card-actions>
        </v-card>
    </v-menu>


</template>

<script>
    export default {
        props: {
            file: {required: true},
            showTooltip: {default: false},
            app: {required: true},
            disabled: {default: false},
        },

        data: () => ({
            visible: false,
            newStatus: null,
        }),

        computed: {

            request() {
                return this.app.requests.Changefilestatus;
            },

            dataprovider() {
                return this.app.dataSession.Folders;
            },

            fileStatuses() {
                let r = _.filter(this.$config.material_statuses, item => item.at_documente);
                return _.map(r, item => {
                    return {
                        value: item.slug,
                        text: item.name
                    }
                })
            }
        },

        watch: {
            'file.status': function(newStatus) {
                this.newStatus = newStatus;
            }
        },

        methods: {
            OnClickChange(e) {
                let data = {
                    files: [this.file.id],
                    status: this.newStatus,
                }
                this.request
                    .ResetData()
                    .SetData(data)
                    .Post([
                        response => {
                            this.visible = false;
                            this.app.formproviders.Files.RefreshFolder(this.app.classes.Customeruploader.activeFolderManager.selectedFolder.id)
                        }
                    ]);
            }
        },

        created() {
            this.newStatus = this.file.status;
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
            CsBtnCancel: require('@CsVueComp/buttons/CsBtnCancel').default,
            CsInfoAlert: require('@CsVueComp/sheets/CsInfoAlert').default,
        },

        name: 'FileStatus',
    }
</script>