"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useCollapsible = useCollapsible;
var _vue = require("vue");
var _utils = require("@grozav/utils");
var _constants = require("@inkline/inkline/constants");
function useCollapsible(props) {
  const open = (0, _vue.ref)(props.modelValue.value);
  const windowWidth = (0, _vue.ref)(typeof window !== "undefined" ? window.innerWidth : 0);
  const collapsible = (0, _vue.computed)(() => {
    if (props.collapse.value === true || props.collapse.value === false) {
      return props.collapse.value;
    }
    return windowWidth.value <= _constants.breakpoints[props.collapse.value][1];
  });
  const classes = (0, _vue.computed)(() => ({
    "-open": open.value,
    "-collapsible": collapsible.value,
    [`-collapse-${props.collapse.value}`]: Boolean(props.collapse.value)
  }));
  (0, _vue.watch)(() => props.modelValue.value, value => {
    open.value = value;
  });
  (0, _vue.onMounted)(() => {
    if (typeof window !== "undefined") {
      (0, _utils.on)(window, "resize", onWindowResize);
      onWindowResize();
    }
  });
  (0, _vue.onBeforeUnmount)(() => {
    if (typeof window !== "undefined") {
      (0, _utils.off)(window, "resize", onWindowResize);
    }
  });
  function setOpen(value) {
    open.value = value;
    props.emit("update:modelValue", open.value);
  }
  function toggleOpen() {
    open.value = !open.value;
    props.emit("update:modelValue", open.value);
  }
  function onWindowResize() {
    if (props.collapse.value === true || props.collapse.value === false || typeof window === "undefined") {
      return;
    }
    const currentWindowWidth = window.innerWidth;
    if (windowWidth.value <= _constants.breakpoints[props.collapse.value][1] && currentWindowWidth > _constants.breakpoints[props.collapse.value][1]) {
      setOpen(false);
    }
    windowWidth.value = window.innerWidth;
  }
  return {
    open,
    collapsible,
    classes,
    setOpen,
    toggleOpen
  };
}