import { computed, onMounted, watch, withDirectives, createVNode, resolveDirective } from "vue";
import "./styles/list-item.scss";
import { makePaperProps, usePaper } from "../../composables/paper/index.mjs";
import { makeDisabledProps, useDisabled } from "../../composables/disabled/index.mjs";
import { makeRouterProps, useLink } from "../../composables/router/index.mjs";
import { useNestedItem } from "../../composables/nested/index.mjs";
import { useList } from "./composables/list.mjs";
import { ListItemAvatar } from "./list-item-avatar.mjs";
import { ListItemHeader } from "./list-item-header.mjs";
import { ListItemTitle } from "./list-item-title.mjs";
import { ListItemSubtitle } from "./list-item-subtitle.mjs";
import { Ripple } from "../../directives/ripple/index.mjs";
import { genOverlays } from "../../composables/variant/index.mjs";
import { genericComponent } from "../../utils/define-component.mjs";
const ListItem = genericComponent()({
  name: "VeListItem",
  directives: {
    Ripple
  },
  props: {
    active: Boolean,
    activeColor: {
      type: String,
      default: "primary"
    },
    activeClass: String,
    appendAvatar: String,
    appendIcon: [String, Object],
    link: Boolean,
    prependAvatar: String,
    prependIcon: [String, Object],
    ripple: {
      type: Boolean,
      default: true
    },
    subtitle: String,
    text: String,
    title: String,
    value: null,
    ...makePaperProps({
      variant: "text",
      size: void 0
    }),
    ...makeDisabledProps(),
    ...makeRouterProps()
  },
  setup(props, {
    slots,
    attrs
  }) {
    const link = useLink(props, attrs);
    const id = computed(() => {
      var _a;
      return (_a = props.value) != null ? _a : link.href.value;
    });
    const {
      activate,
      isActive: isNestedActive,
      select,
      isSelected,
      root,
      parent
    } = useNestedItem(id);
    const list = useList();
    const isActive = computed(() => {
      var _a;
      return props.active || ((_a = link.isExactActive) == null ? void 0 : _a.value) || isNestedActive.value;
    });
    const {
      paperClasses,
      paperStyles
    } = usePaper(computed(() => {
      var _a;
      return {
        ...props,
        color: isActive.value ? (_a = props.activeColor) != null ? _a : props.color : props.color
      };
    }));
    const {
      disabledClasses
    } = useDisabled(props);
    onMounted(() => {
      var _a;
      if (((_a = link.isExactActive) == null ? void 0 : _a.value) && parent.value != null) {
        root.open(parent.value, true);
      }
    });
    watch(() => {
      var _a;
      return (_a = link.isExactActive) == null ? void 0 : _a.value;
    }, (val) => {
      if (val && parent.value != null) {
        root.open(parent.value, true);
      }
    });
    const slotProps = computed(() => ({
      isActive: isActive.value,
      activate,
      select,
      isSelected: isSelected.value
    }));
    return () => {
      const Tag = link.isLink.value ? "a" : props.tag;
      const hasTitle = slots.title || props.title;
      const hasSubtitle = slots.subtitle || props.subtitle;
      const hasText = slots.text || props.text;
      const hasHeader = !!(hasText || hasTitle || hasSubtitle);
      const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon);
      const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon);
      const isClickable = !props.disabled && (link.isClickable.value || props.link);
      list == null ? void 0 : list.updateHasPrepend(hasPrepend);
      return withDirectives(createVNode(Tag, {
        "class": ["ve-list-item", {
          "ve-list-item--active": isActive.value,
          "ve-list-item--link": isClickable,
          "ve-list-item--prepend": !hasPrepend && (list == null ? void 0 : list.hasPrepend.value),
          [`${props.activeClass}`]: isActive.value && props.activeClass
        }, paperClasses.value, disabledClasses.value],
        "style": paperStyles.value,
        "href": link.href.value,
        "tabindex": isClickable ? 0 : void 0,
        "onClick": isClickable && ((e) => {
          var _a;
          (_a = link.navigate) == null ? void 0 : _a.call(link, e);
          props.value != null && activate(!isNestedActive.value, e);
        })
      }, {
        default: () => {
          var _a, _b, _c, _d, _e;
          return [genOverlays(isClickable, "ve-list-item"), hasPrepend && ((_b = (_a = slots.prepend) == null ? void 0 : _a.call(slots, slotProps.value)) != null ? _b : createVNode(ListItemAvatar, {
            "start": true,
            "color": "inherit",
            "variant": "text",
            "density": props.density,
            "icon": props.prependIcon,
            "image": props.prependAvatar
          }, null)), hasHeader && createVNode(ListItemHeader, null, {
            default: () => {
              var _a2, _b2;
              return [hasTitle && createVNode(ListItemTitle, null, {
                default: () => {
                  var _a3, _b3;
                  return [(_b3 = (_a3 = slots.title) == null ? void 0 : _a3.call(slots, {
                    title: props.title
                  })) != null ? _b3 : props.title];
                }
              }), hasSubtitle && createVNode(ListItemSubtitle, null, {
                default: () => {
                  var _a3, _b3;
                  return [(_b3 = (_a3 = slots.subtitle) == null ? void 0 : _a3.call(slots, {
                    subtitle: props.subtitle
                  })) != null ? _b3 : props.subtitle];
                }
              }), hasText && createVNode("div", null, [(_b2 = (_a2 = slots.text) == null ? void 0 : _a2.call(slots, {
                text: props.text
              })) != null ? _b2 : props.text])];
            }
          }), (_c = slots.default) == null ? void 0 : _c.call(slots, slotProps.value), hasAppend && ((_e = (_d = slots.append) == null ? void 0 : _d.call(slots, slotProps.value)) != null ? _e : createVNode(ListItemAvatar, {
            "end": true,
            "color": "inherit",
            "variant": "text",
            "density": props.density,
            "icon": props.appendIcon,
            "image": props.appendAvatar
          }, null))];
        }
      }), [[resolveDirective("ripple"), isClickable && props.ripple]]);
    };
  }
});
export {
  ListItem
};
//# sourceMappingURL=list-item.mjs.map
