import Class from '../mixin/class';
import Media from '../mixin/media';
import {attr, getCssVar, toggleClass, unwrap, wrapInner} from 'uikit-util';

export default {

    mixins: [Class, Media],

    props: {
        fill: String
    },

    data: {
        fill: '',
        clsWrapper: 'uk-leader-fill',
        clsHide: 'uk-leader-hide',
        attrFill: 'data-fill'
    },

    computed: {

        fill({fill}) {
            return fill || getCssVar('leader-fill-content');
        }

    },

    disconnected() {
        this.wrapper && unwrap(this.wrapper.childNodes);
    },

    update: {

        read({changed, width}) {

            const prev = width;

            width = Math.floor(this.$el.offsetWidth / 2);

            return {
                width,
                fill: this.fill,
                changed: changed || prev !== width,
                hide: !this.matchMedia
            };
        },

        write(data) {

            if (!this.wrapper) {
                [this.wrapper] = wrapInner(this.$el, `<span class="${this.clsWrapper}">`);
            }

            toggleClass(this.wrapper, this.clsHide, data.hide);

            if (data.changed) {
                data.changed = false;
                attr(this.wrapper, this.attrFill, new Array(data.width).join(data.fill));
            }

        },

        events: ['resize']

    }

};

@@ -500,11 +500,8 @@
     
-dis
 conn
@@ -518,16 +518,17 @@
         
+%5B
 this.wra
@@ -535,11 +535,106 @@
 pper
- &&
+%5D = wrapInner(this.$el, %60%3Cspan class=%22$%7Bthis.clsWrapper%7D%22%3E%60);%0A    %7D,%0A%0A    disconnected() %7B%0A       
  unw
@@ -1034,147 +1034,8 @@
  %7B%0A%0A
-            if (!this.wrapper) %7B%0A                %5Bthis.wrapper%5D = wrapInner(this.$el, %60%3Cspan class=%22$%7Bthis.clsWrapper%7D%22%3E%60);%0A            %7D%0A%0A
     

update leader