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

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { clearError, useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useLocale } from "../composables/useLocale";
import { tv } from "../utils/tv";
import B24Avatar from "./Avatar.vue";
import B24Button from "./Button.vue";
const _props = defineProps({
  as: { type: null, required: false, default: "main" },
  icon: { type: [Function, Object], required: false },
  avatar: { type: Object, required: false },
  color: { type: null, required: false },
  error: { type: Object, required: false },
  redirect: { type: String, required: false, default: "/" },
  clear: { type: [Boolean, Object], required: false, default: true },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const props = useComponentProps("error", _props);
const { t } = useLocale();
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.error || {} })());
function handleError() {
  clearError({ redirect: props.redirect });
}
</script>

<template>
  <Primitive :as="props.as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <div v-if="props.icon || props.avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
      <slot name="leading" :b24ui="b24ui">
        <Component :is="props.icon" v-if="props.icon" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })" />
        <B24Avatar
          v-else-if="!!props.avatar"
          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
          :color="props.color"
          v-bind="props.avatar"
          data-slot="leadingAvatar"
          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
        />
      </slot>
    </div>
    <p v-if="!!props.error?.statusCode || !!props.error?.status || !!slots.statusCode" data-slot="statusCode" :class="b24ui.statusCode({ class: props.b24ui?.statusCode })">
      <slot name="statusCode">
        {{ props.error?.statusCode || props.error?.status }}
      </slot>
    </p>
    <h1 v-if="!!props.error?.statusMessage || !!props.error?.statusText || !!slots.statusMessage" data-slot="statusMessage" :class="b24ui.statusMessage({ class: props.b24ui?.statusMessage })">
      <slot name="statusMessage">
        {{ props.error?.statusMessage || props.error?.statusText }}
      </slot>
    </h1>
    <p v-if="props.error?.message && props.error.message !== (props.error.statusMessage || props.error.statusText) || !!slots.message" data-slot="message" :class="b24ui.message({ class: props.b24ui?.message })">
      <slot name="message">
        {{ props.error?.message }}
      </slot>
    </p>
    <div v-if="!!props.clear || !!slots.links" data-slot="links" :class="b24ui.links({ class: props.b24ui?.links })">
      <slot name="links">
        <B24Button
          v-if="props.clear"
          size="lg"
          color="air-primary"
          :label="t('error.clear')"
          v-bind="typeof props.clear === 'object' ? props.clear : {}"
          @click="handleError"
        />
      </slot>
    </div>
  </Primitive>
</template>
