import create from "../utils/create";
import { on, off } from "../utils/dom/event"; // Mixins

import { PortalMixin } from "../mixins/portal";
import { ChildrenMixin } from "../mixins/relation"; // Components

import Cell from "../cell";
import Icon from "../icon";
import Popup from "../popup";
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', [_c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.showWrapper,
        expression: "showWrapper"
      }],
      ref: "wrapper",
      class: _vm.b([_vm.parents.direction]),
      style: _vm.style,
      on: {
        "click": _vm.onClickWrapper
      }
    }, [_c('Popup', {
      class: _vm.b('content'),
      attrs: {
        "overlay": _vm.parents.overlay,
        "position": _vm.parents.direction === 'down' ? 'top' : 'bottom',
        "duration": _vm.transition ? _vm.parents.duration : 0,
        "lazyRender": _vm.lazyRender,
        "overlayStyle": {
          position: 'absolute'
        },
        "closeOnClickOverlay": _vm.parents.closeOnClickOverlay
      },
      on: {
        "open": function open($event) {
          return _vm.onOpen('open');
        },
        "opened": function opened($event) {
          return _vm.onOpen('opened');
        },
        "close": function close($event) {
          return _vm.onOpen('close');
        },
        "closed": function closed($event) {
          return _vm.onOpen('closed');
        }
      },
      model: {
        value: _vm.showPopup,
        callback: function callback($$v) {
          _vm.showPopup = $$v;
        },
        expression: "showPopup"
      }
    }, [_vm._l(_vm.options, function (option) {
      return _c('Cell', {
        key: option.value,
        class: _vm.b('option', {
          active: option.value === _vm.value
        }),
        style: {
          color: option.value === _vm.value ? _vm.parents.activeColor : ''
        },
        attrs: {
          "clickable": "",
          "icon": option.icon,
          "title": option.text
        },
        on: {
          "click": function click($event) {
            return _vm.onClick(option);
          }
        }
      }, [option.value === _vm.value ? _c('Icon', {
        class: _vm.b('icon'),
        attrs: {
          "color": _vm.parents.activeColor,
          "name": "check"
        }
      }) : _vm._e()], 1);
    }), _vm._t("default")], 2)], 1)]);
  },
  components: {
    Cell: Cell,
    Icon: Icon,
    Popup: Popup
  },
  name: "dropdown-item",
  mixins: [PortalMixin({
    ref: "wrapper"
  }), ChildrenMixin("vmDropdownMenu")],
  props: {
    value: null,
    title: String,
    disabled: Boolean,
    titleClass: String,
    options: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    lazyRender: {
      type: Boolean,
      default: true
    }
  },
  data: function data() {
    return {
      transition: true,
      showPopup: false,
      showWrapper: false
    };
  },
  computed: {
    style: function style() {
      var _this$parents = this.parents,
          zIndex = _this$parents.zIndex,
          offset = _this$parents.offset,
          direction = _this$parents.direction;
      var style = {
        zIndex: zIndex
      };

      if (direction === "down") {
        style.top = offset + "px";
      } else {
        style.bottom = offset + "px";
      }

      return style;
    },
    displayTitle: function displayTitle() {
      var _this = this;

      if (this.title) {
        return this.title;
      }

      var match = this.options.filter(function (option) {
        return option.value === _this.value;
      });
      return match.length ? match[0].text : "";
    }
  },
  watch: {
    showPopup: function showPopup(val) {
      this.bindScroll(val);
    }
  },
  methods: {
    onClick: function onClick(option) {
      this.showPopup = false;

      if (option.value !== this.value) {
        this.$emit("input", option.value);
        this.$emit("change", option.value);
      }
    },
    onOpen: function onOpen(name) {
      if (name === "closed") {
        this.showWrapper = false;
      }

      this.$emit(name);
    },
    // @exposed-api
    toggle: function toggle(show, options) {
      if (show === void 0) {
        show = !this.showPopup;
      }

      if (options === void 0) {
        options = {};
      }

      if (show === this.showPopup) {
        return;
      }

      this.transition = !options.immediate;
      this.showPopup = show;

      if (show) {
        this.parents.updateOffset();
        this.showWrapper = true;
      }
    },
    bindScroll: function bindScroll(bind) {
      var scroller = this.parents.scroller;
      var action = bind ? on : off;
      action(scroller, "scroll", this.onScroll, true);
    },
    onScroll: function onScroll() {
      this.parents.updateOffset();
    },
    onClickWrapper: function onClickWrapper(event) {
      // prevent being identified as clicking outside and closed when use get-contaienr
      if (this.getContainer) {
        event.stopPropagation();
      }
    }
  }
});