/*eslint no-unused-vars: warn */
/*eslint max-len: ["error", { "code": 160 }] */
/*eslint-disable no-trailing-spaces */
/*eslint-env es6*/

import {calc} from "./css-calc";
import fitty from "./fitty";
import {textFit} from "./textfit";

export default {
    install(Vue/*,options*/){
        Vue.component('fittext',{
        props: {
            maxsize: {
                type: String,
                default: "512px",
            },
            minsize: {
                type: String,
                default: "10px",
            },
            vertical: Boolean,
            singleline: Boolean,
            dynamic: Boolean,
        },
        data() {
            return {
                resizeObserver: null,
                mutationObserver: null,
            };
        },
        computed: {
            rootStyle() {
                if (this.vertical) {
                    return `height: 100%;`;
                } else {
                    return `width: 100%;`;
                }
            }
        },
        methods: {
        },
        mounted() {
            const self = this;
            // If the content could change after initial presentation,
            // Use the fitty method. It is slightly worse on multiline horizontal text,
            // but better supports content that can change later on.
            fitty(self.$refs.text,
                {
                minSize: calc(self.minsize),
                maxSize: calc(self.maxsize),
                vertical: self.vertical,
                multiline: !self.singleline,
            });
        },
        unmounted() {
            if(this.mutationObserver) {
                this.mutationObserver.disconnect();
            }
            if(this.resizeObserver) {
                this.resizeObserver.disconnect();
            }
        },
        template: `
        <div class='q-fittext' ref='container' :style="rootStyle">
            <span :style="'display:block; white-space:'+ ((singleline)?'nowrap':'normal')+';'" class='q-fittext-text' ref='text'><slot></slot>
            </span
        ></div>
        `,
        });
    },
};