<template>
    <div class="w-100">
        <div v-html="data.html"></div>
        <div class="form-group">
            <label>{{$t('html')}}</label>
            <textarea class="form-control"
                      readonly
                      v-model="data.html"
                      dir="ltr"
                      style="direction:ltr"></textarea>
        </div>
        <div class="form-group">
            <div class="btn-group">
                <button class="btn btn-secondary"
                        :class="btnCopyCls"
                        :title="$t('copy')">
                    <span class="mdi mdi-18px mdi-content-copy"></span>
                </button>
                <button class="btn btn-primary ml-2"
                        :title="$t('enter-embed-html')"
                        @click="modal.visible = true">
                    <span class="mdi mdi-18px mdi-youtube"></span>
                </button>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"
                          :style="{ width: '150px' }">{{$t('caption')}}</span>
                </div>
                <input class="form-control"
                       v-model="data.caption" />
            </div>
        </div>
        <div class="form-group">
            <button class="btn btn-primary"
                    @click="settingsVisible = !settingsVisible">
                <span class="mdi mdi-18px"
                      :class="[settingsVisible ? 'mdi-menu-down' : 'mdi-menu-up']"></span>
                &nbsp; {{$t('settings')}}
            </button>
            <div v-show="settingsVisible">
                <div class="card card-body">
                    <youtube-settings v-model="settings"></youtube-settings>
                </div>
            </div>
        </div>
        <j-modal v-model="modal.visible">
            <h5 slot="header">{{$t('enter-embed-html')}}</h5>
            <div class="form-group">
                <textarea class="form-control"
                          v-model="modal.embedHtml"
                          dir="ltr"
                          rows="6"
                          style="direction: ltr"></textarea>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block"
                        @click="importEmbedHtml">
                    {{$t('import')}}
                </button>
            </div>
        </j-modal>
    </div>
</template>

<script>
import loc from './youtube.resx';
import Youtube from './Youtube';
import youtubeSettings from './youtube-settings.vue';
import Clipboard from 'clipboard';
import { i18n } from "../../../../localization/vue-i18n";
import { isVoid } from "../../util";
import isEqual from 'lodash.isequal';
import { guid } from "libj-core";
var d = new Youtube();
export default {
    i18n: i18n(loc),
    components: {
        'youtube-settings': youtubeSettings
    },
    props: {
        /**
         * object of type {
         *  html: '',
         *  caption: '',
         * }
         */
        value: {
            type: Object,
            default() {
                return d.getEmptyData();
            }
        },
        /**
         * object of type { }
         */
        config: {
            type: Object,
            default() {
                return d.getEmptyConfig();
            }
        }
    },
    data() {
        return {
            data: Object.assign({}, this.value),
            settingsVisible: false,
            modal: {
                visible: false,
                embedHtml: '',
            },
            settings: {
                width: "560px",
                height: "320px"
            },
            btnCopyCls: guid.newId(),
            clipboard: null,
        };
    },
    created() {
        this.clipboard = new Clipboard(`.${this.btnCopyCls}`, {
            text: trigger => {
                var res = this.data.html;
                this.$toast.show({
                    message: this.$t('copied'),
                    timeout: 1000
                });
                return res;
            }
        });
        this.dataChanged();
        // $(() => {
        //     setTimeout(() => {
        //         this.modal.visible = true;
        //     }, 500);
        // });
    },
    methods: {
        getData() {
            return Object.assign({}, d.getEmptyData(), this.data);
        },
        setData(o) {
            this.data = Object.assign({}, d.getEmptyData(), o);
        },
        dataChanged() {
            if (!isVoid(this.data.html)) {
                const jq = $(this.data.html);
                const w = jq.css('width');
                const h = jq.css('height');
                this.settings.width = isVoid(w) ? this.settings.width : w;
                this.settings.height = isVoid(h) ? this.settings.height : h;
            }
            if (!isEqual(this.data, this.value)) {
                this.$emit('input', this.getData());
            }
        },
        settingsChanged() {
            if (isVoid(this.data.html)) {
                return;
            }
            const jq = $(this.data.html);
            if (!isVoid(this.settings.width)) {
                jq.css('width', this.settings.width);
            }
            if (!isVoid(this.settings.height)) {
                jq.css('height', this.settings.height);
            }
            this.data.html = jq[0].outerHTML;
        },
        importEmbedHtml() {
            function showErrorMessage() {
                this.$toast.show({
                    message: this.$t('error-importing-embed-html'),
                    color: 'error'
                });
            }
            var showErr = showErrorMessage.bind(this);
            try {
                var html = this.modal.embedHtml;
                const jq = $(html);
                jq.css('width', `${jq.attr('width')}px`);
                jq.css('height', `${jq.attr('height')}px`);
                jq.removeAttr('width').removeAttr('height');
                this.data.html = jq[0].outerHTML;
                this.modal.visible = false;
            } catch (e) {
                console.log(e);
                showErr();
            }
        }
    },
    watch: {
        value: {
            handler() {
                if (!isEqual(this.data, this.value)) {
                    this.setData(this.value);
                }
            },
            deep: true
        },
        data: {
            handler() {
                this.dataChanged();
            },
            deep: true
        },
        settings: {
            handler() {
                this.settingsChanged();
            },
            deep: true
        }
    }
}
</script>