<template>
    <div class="w-100">
        <div>
            <img :src="data.url"
                 :style="imageStyle" />
        </div>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <button class="btn btn-primary"
                            :style="{width: '50px'}"
                            @click="choosing = true"
                            :title="$t('select-image')">
                        <span class="mdi mdi-18px mdi-folder-image"></span>
                    </button>
                </div>
                <input v-model="data.url"
                       class="form-control"
                       :placeholder="$t('url')"
                       dir="ltr"
                       style="direction: left" />
            </div>
        </div>
        <div class="form-group">
            <label>{{$t('caption')}}</label>
            <medium-editor v-model="data.caption"
                           :buttons="buttons"
                           :schema="schema"
                           :json="json"></medium-editor>
        </div>
        <div class="form-group">
            <button class="btn btn-primary"
                    @click="settingsVisible = !settingsVisible">
                {{$t('settings')}}
                &nbsp; <span class="mdi mdi-18px"
                      :class="[settingsVisible ? 'mdi-menu-down' : 'mdi-menu-up']"></span>
            </button>
            <div v-show="settingsVisible">
                <div class="card card-body">
                    <image-url-settings v-model="data"></image-url-settings>
                </div>
            </div>
        </div>
        <j-filer-modal v-model="choosing"
                       @selected="imageSelected"></j-filer-modal>
    </div>
</template>

<script>
import loc from './image-url.resx';
import ImageUrl from './ImageUrl';
import imageUrlSettings from './image-url-settings.vue';
import { i18n } from "../../../../localization/vue-i18n";
import { isVoid } from "../../util";
import isEqual from 'lodash.isequal';
var d = new ImageUrl();
export default {
    i18n: i18n(loc),
    components: {
        'image-url-settings': imageUrlSettings,
    },
    props: {
        /**
         * object of type {
         *  url: '',
         *  caption: '',
         *  width: '100%',
         *  minWidth: '300px',
         *  maxWidth: '900px',
         *  height: 'auto',
         *  minHeight: '',
         *  maxHeight: ''
         * }
         */
        value: {
            type: Object,
            default() {
                return d.getEmptyData();
            }
        },
        /**
         * object of type {
         *  validExtensions: ['jpg', 'jpeg', 'gif', 'png', 'svg']
         * }
         */
        config: {
            type: Object,
            default() {
                return d.getEmptyConfig();
            }
        }
    },
    data() {
        return {
            data: Object.assign({}, this.value),
            settingsVisible: false,
            choosing: false,
            buttons: [
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'subscript',
                'superscript',
                'anchor',
                'quote',
                'pre',
                'orderedlist',
                'unorderedlist',
                'removeFormat',
                'highlight',
                'h1',
                'h2',
                'h3',
            ],
            schema: '{}',
            json: ''
        };
    },
    computed: {
        imageStyle() {
            return {
                'object-fit': 'cover',
                'width': this.data.width,
                'min-width': this.data.minWidth,
                'max-width': this.data.maxWidth,
                'height': this.data.height,
                'min-height': this.data.minHeight,
                'max-height': this.data.maxHeight
            };
        },
        buttonStyle() {
            return {
                width: '50px'
            };
        },
    },
    methods: {
        getData() {
            return Object.assign({}, d.getEmptyData(), this.data);
        },
        setData(o) {
            this.data = Object.assign({}, d.getEmptyData(), o);
        },
        imageSelected(items) {
            function showError(err) {
                this.$toast.show({
                    message: isVoid(err) ? this.$t('select-only-one-image') : err,
                    color: 'error'
                });
            }
            if (isVoid(items) || items.length > 1) {
                return showError.bind(this)();
            }
            var x = items[0];
            if (x.type !== 'file') {
                return showError.bind(this)();
            }
            var validExtensions = this.config.validExtensions;
            var ext = x.extension;
            var i = validExtensions.findIndex(e => e === ext);
            if (i < 0) {
                return showError.bind(this)(this.$t('validExtensions',
                    [JSON.stringify(validExtensions)]));
            }
            this.choosing = false;
            this.data.url = x.url;
        }
    },
    watch: {
        value: {
            handler() {
                if (!isEqual(this.data, this.value)) {
                    this.setData(this.value);
                }
            },
            deep: true
        },
        data: {
            handler() {
                if (!isEqual(this.data, this.value)) {
                    var d = this.getData();
                    this.$emit('input', d);
                }
            },
            deep: true
        }
    }
}
</script>