import { DOMExtension } from '../../utils/extensions/dom';
import { Namespace } from "../../utils/namespace";

const namespace = Namespace.Create('overlay')

export default {
    name: namespace.name,
    props: {
        show: {
          type: Boolean,
          default: false
        },
        zIndex: {
          type: Number,
          default: 1030
        },
        lockScroll: {
          type: Boolean,
          default: true
        },
        duration: {
          type: Number,
          default: 0.36
        },
        customStyle: {
          type: Object,
          default: () => {}
        }
    },
    computed: {
        cls() {
          return namespace.derive();
        },
        style() {
          const res = {
            zIndex: this.zIndex,
            animationDuration: `${this.duration}s`,
            ...this.customStyle
          };
          return res;
        }
    },
    methods: {
        onTouchMove(e) {
          if (this.lockScroll) {
            DOMExtension.PreventDefault(e, false);
          }
        },
        onClick(e) {
          this.$emit('click', e);
        }
    },
    render() {
      return (
        <transition name="mx-fade">
          {
            this.show &&
            (
              <div class={this.cls} style={this.style} vOn:touchMove_stop = {this.onTouchMove} vOn:click_stop={this.onClick}>
                {this.$slots.default}
              </div>
            )
          }
        </transition>
      )
    }

}