<template>
    
    <v-card
        :height="height"
        :width="width"
        class="overflow-x-auto overflow-y-hidden"
    >
        
        <v-sheet
            v-if="! activeFile.is_image"
            class="d-flex align-center justify-center"
            :height="height - 44"
            width="100%"
        >
            <iframe 
                :style="{
                    width:'100%',
                    height: (height - 44) + 'px',
                    border: 'none !important',
                }" 
                :src="src"
            >
            </iframe>
        </v-sheet>
    
        <v-sheet
            class="d-flex align-center justify-center"
            :height="height - 44"
            v-else
            width="100%"
        >
            <v-img
                :src="activeFile.url"
                :height="imageHeight"
                contain
                class="mx-auto"
            >
            </v-img>
        </v-sheet>
    

        <v-card-actions class="justify-center">
            <cs-btn-cancel 
                @click="OnClick"
            />
        </v-card-actions>
    </v-card>
</template>

<script>
    /**
     * 
     */
    export default {
        props: {
            app: {required: true},
            height: {required: true},
            customer: {required: true},
            width: {required: true},
            activeFile: {required: true},

            microsoftSrc: {default: 'https://view.officeapps.live.com/op/embed.aspx?src=[url]'},
            googleSrc: {default: 'https://docs.google.com/gview?url=[url]&embedded=true'},
        },

        computed: {
            src() {
                let r = this.activeFile.is_office ? this.microsoftSrc : this.googleSrc;
                return _.replace(r, '[url]', this.activeFile.url)
            },

            documentsController() {
                return this.app.classes.DocumentsController;
            },

            imageHeight() {
                let h = 1000000;

                if( !! this.activeFile.file_height )
                {
                    h = this.activeFile.file_height;
                }

                if(this.height - 44 < h)
                {
                    h = this.height - 44;
                }

                return h;
            }
        },

        methods: {
            OnClick() {
                this.app.classes.Customeruploader.activeFileManager.previewFile = null;
            }
        },

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

        name: 'FilePreview',
    }
</script>