<script>
import theme from "#build/b24ui/link";
</script>

<script setup>
import { computed, inject } from "vue";
import { defu } from "defu";
import { Slot } from "reka-ui";
import { hasProtocol } from "ufo";
import { useAppConfig } from "#imports";
import { mergeClasses } from "../../../utils";
import { tv } from "../../../utils/tv";
import B24LinkBase from "../../../components/LinkBase.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  as: { type: null, required: false, default: "button" },
  type: { type: null, required: false, default: "button" },
  disabled: { type: Boolean, required: false },
  active: { type: Boolean, required: false, default: void 0 },
  exact: { type: Boolean, required: false },
  exactQuery: { type: [Boolean, String], required: false },
  exactHash: { type: Boolean, required: false },
  inactiveClass: { type: String, required: false },
  activeClass: { type: String, required: false },
  ariaCurrentValue: { type: String, required: false, default: "page" },
  custom: { type: Boolean, required: false },
  isAction: { type: Boolean, required: false, default: false },
  raw: { type: Boolean, required: false },
  class: { type: null, required: false },
  to: { type: String, required: false },
  href: { type: String, required: false },
  external: { type: Boolean, required: false },
  target: { type: [String, Object, null], required: false },
  rel: { type: [String, Object, null], required: false },
  noRel: { type: Boolean, required: false }
});
defineSlots();
const appConfig = useAppConfig();
const b24ui = computed(() => tv({
  extend: theme,
  ...defu({
    variants: {
      active: {
        true: mergeClasses(appConfig.b24ui?.link?.variants?.active?.true, props.activeClass),
        false: mergeClasses(appConfig.b24ui?.link?.variants?.active?.false, props.inactiveClass)
      }
    }
  }, appConfig.b24ui?.link || {})
}));
const href = computed(() => props.to ?? props.href ?? "");
const isExternal = computed(() => {
  if (props.target === "_blank") {
    return true;
  }
  if (props.external) {
    return true;
  }
  if (!href.value) {
    return false;
  }
  return hasProtocol(href.value, { acceptRelative: true });
});
const hasTarget = computed(() => !!props.target && props.target !== "_self");
const isLinkActive = computed(() => {
  if (props.active !== void 0) {
    return props.active;
  }
  return false;
});
const linkClass = computed(() => {
  const active = isLinkActive.value;
  if (props.raw) {
    return [props.class, active ? props.activeClass : props.inactiveClass];
  }
  return b24ui.value({
    class: props.class,
    active,
    disabled: props.disabled,
    isAction: Boolean(props.isAction)
  });
});
const rel = computed(() => {
  if (props.noRel) {
    return null;
  }
  if (props.rel !== void 0) {
    return props.rel || null;
  }
  if (isExternal.value || hasTarget.value) {
    return "noopener noreferrer";
  }
  return null;
});
const handleNavigation = inject("bitrix24ui:router", void 0);
const navigate = handleNavigation ? (e) => {
  handleNavigation(e, {
    href: href.value || "",
    external: isExternal.value,
    target: props.target || (isExternal.value ? "_blank" : void 0)
  });
} : void 0;
</script>

<template>
  <Slot v-if="custom">
    <slot
      v-bind="{
  ...$attrs,
  as,
  type,
  disabled,
  href,
  navigate,
  rel,
  target: target || (isExternal ? '_blank' : void 0),
  isExternal,
  active: isLinkActive
}"
    />
  </Slot>
  <B24LinkBase
    v-else
    v-bind="{
  ...$attrs,
  as,
  type,
  disabled,
  href,
  navigate,
  rel,
  target: target || (isExternal ? '_blank' : void 0),
  isExternal
}"
    :class="linkClass"
  >
    <slot :active="isLinkActive" />
  </B24LinkBase>
</template>
