import { toRef, ref, computed, watch, onBeforeMount, createVNode, Fragment, mergeProps } from "vue";
import "./styles/drawer.scss";
import { makeScrollbar, useScrollbar } from "../../composables/scrollbar/index.mjs";
import { makeBorderProps, useBorder } from "../../composables/border/index.mjs";
import { useBackgroundColor } from "../../composables/color/index.mjs";
import { useDisplay } from "../../composables/display/index.mjs";
import { useProxiedModel } from "../../composables/proxied-model/index.mjs";
import { useRouter } from "../../composables/router/index.mjs";
import { makeTagProps } from "../../composables/tag/index.mjs";
import { makeThemeProps, provideTheme } from "../../composables/theme/index.mjs";
import { useTouch } from "./touch.mjs";
import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout/layout-item.mjs";
import { Button } from "../button/button.mjs";
import { Scrim } from "../scrim/scrim.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
const Drawer = defineComponent({
  name: "VeDrawer",
  props: {
    disableResizeWatcher: Boolean,
    disableRouteWatcher: Boolean,
    color: String,
    expandOnHover: Boolean,
    permanent: Boolean,
    rail: Boolean,
    railWidth: {
      type: [Number, String],
      default: 52
    },
    showToggler: Boolean,
    temporary: Boolean,
    touchless: Boolean,
    width: {
      type: [Number, String],
      default: 256
    },
    ...makeTagProps({
      tag: "nav"
    }),
    ...makeScrollbar(),
    ...makeThemeProps(),
    ...makeBorderProps(),
    ...makeLayoutItemProps({
      position: "fixed",
      anchor: "left",
      modelValue: null
    })
  },
  emits: {
    "update:modelValue": (_modelValue) => true
  },
  setup(props, {
    attrs,
    slots
  }) {
    const {
      themeClasses
    } = provideTheme(props);
    const {
      borderClasses
    } = useBorder(props);
    const {
      scrollbarClasses
    } = useScrollbar(props);
    const {
      backgroundColorClasses,
      backgroundColorStyles
    } = useBackgroundColor(toRef(props, "color"));
    const {
      mobile,
      platform
    } = useDisplay();
    const router = useRouter();
    const isActive = useProxiedModel(props, "modelValue", null, (v) => !!v);
    const isHovering = ref(false);
    const width = computed(() => {
      return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
    });
    const isTemporary = computed(() => !props.permanent && !!(mobile.value || props.temporary));
    const hasToggler = computed(() => props.showToggler && !mobile.value);
    watch(isTemporary, (val) => {
      if (!props.disableResizeWatcher && !props.permanent)
        isActive.value = !val;
    });
    if (router) {
      watch(router.currentRoute, () => {
        if (!props.disableRouteWatcher && isTemporary.value)
          isActive.value = false;
      });
    }
    watch(() => props.permanent, (val) => {
      if (val)
        isActive.value = true;
    });
    onBeforeMount(() => {
      if (props.modelValue !== null || isTemporary.value)
        return;
      isActive.value = props.permanent || !mobile.value;
    });
    const {
      isDragging,
      dragProgress,
      dragStyles
    } = useTouch({
      isActive,
      isTemporary,
      width,
      touchless: toRef(props, "touchless"),
      position: toRef(props, "anchor")
    });
    const layoutSize = computed(() => {
      const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value;
      return isDragging.value ? size * dragProgress.value : size;
    });
    const priority = computed(() => isTemporary.value ? parseInt(props.priority, 10) + 1 : props.priority);
    const {
      layoutItemStyles: _layoutItemStyles,
      layoutItemScrimStyles
    } = useLayoutItem(computed(() => ({
      name: props.name,
      position: props.position,
      anchor: props.anchor,
      size: width.value,
      layoutSize: layoutSize.value,
      priority: priority.value,
      active: isActive.value || isDragging.value,
      disableTransition: isDragging.value
    })));
    const layoutItemStyles = computed(() => {
      const styles = _layoutItemStyles.value;
      if (!platform.value.ssr && hasToggler.value && styles.transform) {
        styles.transform = styles.transform.replace("110", "90");
      }
      return styles;
    });
    return () => {
      var _a;
      const slotProps = {
        onClick: () => {
          isActive.value = true;
        }
      };
      return createVNode(Fragment, null, [(_a = slots.activator) == null ? void 0 : _a.call(slots, {
        props: slotProps
      }), createVNode(props.tag, mergeProps({
        "onMouseenter": () => isHovering.value = true,
        "onMouseleave": () => isHovering.value = false,
        "class": ["ve-drawer", {
          "ve-drawer--active": isActive.value,
          "ve-drawer--top": props.anchor === "top",
          "ve-drawer--bottom": props.anchor === "bottom",
          "ve-drawer--start": props.anchor === "left",
          "ve-drawer--end": props.anchor === "right",
          "ve-drawer--expand-on-hover": props.expandOnHover,
          "ve-drawer--rail": props.rail,
          "ve-drawer--is-hovering": isHovering.value,
          "ve-drawer--temporary": isTemporary.value,
          "ve-drawer--has-toggler": hasToggler.value
        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value],
        "style": [layoutItemStyles.value, backgroundColorStyles.value, dragStyles.value]
      }, attrs), {
        default: () => {
          var _a2;
          return [createVNode("div", {
            "class": ["ve-drawer__wrapper", scrollbarClasses.value]
          }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]), hasToggler.value && createVNode(Button, {
            "position": "absolute",
            "class": "ve-drawer__toggler",
            "icon": "$toggler",
            "top": props.anchor === "left" || props.anchor === "right" ? 204 : void 0,
            "left": props.anchor === "bottom" || props.anchor === "top" ? 204 : props.anchor === "right" ? 0 : void 0,
            "right": props.anchor === "left" ? 0 : void 0,
            "bottom": props.anchor === "top" ? 0 : void 0,
            "size": "small",
            "density": "ultra-high",
            "border": true,
            "shape": "circle",
            "onClick": () => {
              isActive.value = !isActive.value;
            }
          }, null)];
        }
      }), createVNode(Scrim, {
        "modelValue": isTemporary.value && !!(isDragging.value || isActive.value),
        "style": [layoutItemScrimStyles.value, isDragging.value ? {
          opacity: dragProgress.value * 0.2,
          transition: "none"
        } : void 0],
        "onClick": () => isActive.value = false
      }, null)]);
    };
  }
});
export {
  Drawer
};
//# sourceMappingURL=drawer.mjs.map
