import Class from '../mixin/class';
import {
    boxModelAdjust,
    css,
    dimensions,
    endsWith,
    height,
    isNumeric,
    isString,
    isVisible,
    offset,
    query,
    toFloat,
} from 'uikit-util';

export default {
    mixins: [Class],

    props: {
        expand: Boolean,
        offsetTop: Boolean,
        offsetBottom: Boolean,
        minHeight: Number,
    },

    data: {
        expand: false,
        offsetTop: false,
        offsetBottom: false,
        minHeight: 0,
    },

    update: {
        read({ minHeight: prev }) {
            if (!isVisible(this.$el)) {
                return false;
            }

            let minHeight = '';
            const box = boxModelAdjust(this.$el, 'height', 'content-box');

            if (this.expand) {
                minHeight =
                    height(window) -
                        (dimensions(document.documentElement).height -
                            dimensions(this.$el).height) -
                        box || '';
            } else {
                // on mobile devices (iOS and Android) window.innerHeight !== 100vh
                minHeight = 'calc(100vh';

                if (this.offsetTop) {
                    const { top } = offset(this.$el);
                    minHeight += top > 0 && top < height(window) / 2 ? ` - ${top}px` : '';
                }

                if (this.offsetBottom === true) {
                    minHeight += ` - ${dimensions(this.$el.nextElementSibling).height}px`;
                } else if (isNumeric(this.offsetBottom)) {
                    minHeight += ` - ${this.offsetBottom}vh`;
                } else if (this.offsetBottom && endsWith(this.offsetBottom, 'px')) {
                    minHeight += ` - ${toFloat(this.offsetBottom)}px`;
                } else if (isString(this.offsetBottom)) {
                    minHeight += ` - ${dimensions(query(this.offsetBottom, this.$el)).height}px`;
                }

                minHeight += `${box ? ` - ${box}px` : ''})`;
            }

            return { minHeight, prev };
        },

        write({ minHeight }) {
            css(this.$el, { minHeight });

            if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
                css(this.$el, 'minHeight', this.minHeight);
            }
        },

        events: ['resize'],
    },
};

@@ -29,16 +29,54 @@
 class';%0A
+import Resize from '../mixin/resize';%0A
 import %7B
@@ -72,24 +72,24 @@
 ';%0Aimport %7B%0A
-
     boxModel
@@ -284,16 +284,24 @@
 : %5BClass
+, Resize
 %5D,%0A%0A    
@@ -510,32 +510,32 @@
 tBottom: false,%0A
-
         minHeigh
@@ -544,24 +544,184 @@
  0,%0A    %7D,%0A%0A
+    computed: %7B%0A        resizeTargets() %7B%0A            // check for offsetTop change%0A            return %5Bthis.$el, document.documentElement%5D;%0A        %7D,%0A    %7D,%0A%0A
     update: 

add check for offsetTop change