<template>
    <div class="image-select__container is-clearfix">
        <div class="image-select__image-container is-clearfix"
             :style="sty"
             v-for="(a, index) in value"
             :key="`${a}_${index}`">
            <img class="image-select__image"
                 :src="`${getImageUrl(a, 80, null, imgHeight)}`" />
            <a class="image-select__image-close-button"
               :style="closeButtonSty"
               @click="removeImage(a)"></a>
        </div>
        <div class="image-select__add-button"
             :style="addButtonSty"
             v-if="maxCount > value.length">
            <a class="image-select__add-link"
               @click="addImage"></a>
        </div>
        <j-filer-modal v-model="choosing"
                       @selected="imageSelected"></j-filer-modal>
    </div>
</template>

<script>
import loc from './j-image-select.resx';
import { i18n } from "../../localization/vue-i18n";
import { thumber } from "libj-core";
export default {
    i18n: i18n(loc),
    props: {
        value: {
            type: Array,
            default() {
                return [];
            }
        },
        maxCount: {
            type: Number,
            default: 1000000
        },
    },
    data() {
        var imgHeight = 150;
        var closeButtonSty = {};
        closeButtonSty[this.float] = '3px';
        return {
            choosing: false,
            validExtensions: ['jpg', 'jpeg', 'gif', 'png', 'svg'],
            imgHeight: imgHeight,
            sty: {
                height: `${imgHeight}px`,
                float: this.float
            },
            closeButtonSty: closeButtonSty,
            addButtonSty: {
                float: this.float
            }
        };
    },
    methods: {
        getImageUrl(imagePath, quality = 90, width = null, height = null) {
            return thumber.relative(imagePath, quality, width, height);
        },
        removeImage(img) {
            var i = this.findIndex(img);
            if (i > -1) {
                this.value.splice(i, 1);
            }
        },
        addImage() {
            this.choosing = true;
        },
        findIndex(img) {
            return this.value.findIndex(a => a === img);
        },
        imageSelected(items) {
            function showError(err) {
                this.$toast.show({
                    message: err === undefined || err === null ? this.$t('select-only-images') : err,
                    color: 'error'
                });
            }
            if (items === undefined || items === null || items.length === 0) {
                return showError.bind(this)();
            }
            var i = items.findIndex(a => a.type !== 'file');
            if (i > -1) {
                return showError.bind(this)();
            }
            i = items.findIndex(a => {
                var j = this.validExtensions.findIndex(e => e === a.extension);
                return j < 0;
            });
            if (i > -1) {
                return showError.bind(this)(this.$t('validExtensions',
                    [JSON.stringify(this.validExtensions)]));
            }
            this.choosing = false;
            items.forEach(a => this.value.push(a.url));
        }
    }
}
</script>