import create from "../utils/create";
import Scroll from "../utils/dom/scroll";
import { isDef } from "../utils"; // Mixins

import { ParentMixin } from "../mixins/relation";
import { ClickOutsideMixin } from "../mixins/click-outside";
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      class: _vm.b()
    }, [_c('div', {
      ref: "bar",
      class: _vm.b('bar', {
        opened: _vm.opened
      }),
      style: _vm.barStyle
    }, _vm._l(_vm.children, function (item, index) {
      return _c('div', {
        key: index,
        class: _vm.b('item', {
          disabled: item.disabled
        }),
        attrs: {
          "role": "button",
          "tabindex": item.disabled ? -1 : 0
        },
        on: {
          "click": function click($event) {
            return _vm.onClick(item, index);
          }
        }
      }, [_c('span', {
        class: [_vm.b('title', {
          active: item.showPopup,
          down: item.showPopup === (_vm.direction === 'down')
        }), item.titleClass],
        style: {
          color: item.showPopup ? _vm.activeColor : ''
        }
      }, [_c('div', {
        staticClass: "vm-ellipsis"
      }, [_vm._t("title", [_vm._v("\n            " + _vm._s(item.displayTitle) + "\n          ")])], 2)])]);
    }), 0), _vm._t("default")], 2);
  },
  name: "dropdown-menu",
  mixins: [ParentMixin("vmDropdownMenu"), ClickOutsideMixin({
    event: "click",
    method: "onClickOutside"
  })],
  props: {
    zIndex: [Number, String],
    activeColor: String,
    overlay: {
      type: Boolean,
      default: true
    },
    duration: {
      type: [Number, String],
      default: 0.2
    },
    direction: {
      type: String,
      default: "down"
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    }
  },
  data: function data() {
    return {
      offset: 0
    };
  },
  computed: {
    scroller: function scroller() {
      return Scroll.getScrollEventTarget(this.$el);
    },
    opened: function opened() {
      return this.children.some(function (item) {
        return item.showWrapper;
      });
    },
    barStyle: function barStyle() {
      if (this.opened && isDef(this.zIndex)) {
        return {
          zIndex: 1 + this.zIndex
        };
      }
    }
  },
  methods: {
    onClick: function onClick(item, index) {
      if (!item.disabled) {
        this.toggleItem(index);
      }
    },
    updateOffset: function updateOffset() {
      if (!this.$refs.bar) {
        return;
      }

      var rect = this.$refs.bar.getBoundingClientRect();

      if (this.direction === "down") {
        this.offset = rect.bottom;
      } else {
        this.offset = window.innerHeight - rect.top;
      }
    },
    toggleItem: function toggleItem(active) {
      this.children.forEach(function (item, index) {
        if (index === active) {
          item.toggle();
        } else {
          item.toggle(false, {
            immediate: true
          });
        }
      });
    },
    onClickOutside: function onClickOutside() {
      this.children.forEach(function (item) {
        item.toggle(false);
      });
    }
  }
});