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

<script setup>
import { ref, computed, onMounted, useTemplateRef } from "vue";
import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useForwardProps } from "../composables/useForwardProps";
import { useLocale } from "../composables/useLocale";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
import B24Avatar from "./Avatar.vue";
import B24Button from "./Button.vue";
import B24Progress from "./Progress.vue";
const _props = defineProps({
  as: { type: null, required: false },
  title: { type: [String, Object, Function], required: false },
  description: { type: [String, Object, Function], required: false },
  icon: { type: [Function, Object], required: false },
  avatar: { type: Object, required: false },
  color: { type: null, required: false },
  orientation: { type: null, required: false, default: "vertical" },
  close: { type: [Boolean, Object], required: false, default: true },
  closeIcon: { type: [Function, Object], required: false },
  actions: { type: Array, required: false },
  duration: { type: Number, required: false },
  progress: { type: [Boolean, Object], required: false, default: true },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  defaultOpen: { type: Boolean, required: false },
  open: { type: Boolean, required: false },
  type: { type: String, required: false }
});
const emits = defineEmits(["escapeKeyDown", "pause", "resume", "swipeStart", "swipeMove", "swipeCancel", "swipeEnd", "update:open"]);
const slots = defineSlots();
const props = useComponentProps("toast", _props);
const { t } = useLocale();
const appConfig = useAppConfig();
const rootProps = useForwardProps(reactivePick(props, "as", "defaultOpen", "open", "duration", "type"), emits);
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.toast || {} })({
  color: props.color,
  orientation: props.orientation,
  title: !!props.title || !!slots.title
}));
const rootRef = useTemplateRef("rootRef");
const height = ref(0);
onMounted(() => {
  if (!rootRef.value?.$el?.getBoundingClientRect) {
    return;
  }
  height.value = rootRef.value.$el.getBoundingClientRect().height;
});
defineExpose({
  height
});
</script>

<template>
  <ToastRoot
    ref="rootRef"
    v-slot="{ remaining, duration: totalDuration, open }"
    v-bind="rootProps"
    :data-orientation="props.orientation"
    data-slot="root"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
    :style="{ '--height': height }"
  >
    <slot name="leading" :b24ui="b24ui">
      <Component
        :is="props.icon"
        v-if="props.icon"
        data-slot="icon"
        :class="b24ui.icon({ class: props.b24ui?.icon })"
      />
      <B24Avatar v-else-if="props.avatar" :size="props.b24ui?.avatarSize || b24ui.avatarSize()" v-bind="props.avatar" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
    </slot>

    <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
      <ToastTitle v-if="props.title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
        <slot name="title">
          <component :is="props.title()" v-if="typeof props.title === 'function'" />
          <component :is="props.title" v-else-if="typeof props.title === 'object'" />
          <template v-else>
            {{ props.title }}
          </template>
        </slot>
      </ToastTitle>
      <ToastDescription v-if="props.description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
        <slot name="description">
          <component :is="props.description()" v-if="typeof props.description === 'function'" />
          <component :is="props.description" v-else-if="typeof props.description === 'object'" />
          <template v-else>
            {{ props.description }}
          </template>
        </slot>
      </ToastDescription>

      <div v-if="props.orientation === 'vertical' && (props.actions?.length || !!slots.actions)" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
        <slot name="actions">
          <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
            <B24Button size="sm" :color="props.color" v-bind="action" />
          </ToastAction>
        </slot>
      </div>
    </div>

    <div v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions) || props.close !== null" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
      <template v-if="props.orientation === 'horizontal' && (props.actions?.length || !!slots.actions)">
        <slot name="actions">
          <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
            <B24Button size="sm" :color="props.color" v-bind="action" />
          </ToastAction>
        </slot>
      </template>

      <ToastClose v-if="props.close || !!slots.close" as-child>
        <slot name="close" :b24ui="b24ui">
          <B24Button
            v-if="props.close"
            :icon="props.closeIcon || icons.close"
            size="sm"
            color="air-tertiary"
            :aria-label="t('toast.close')"
            v-bind="typeof props.close === 'object' ? props.close : {}"
            data-slot="close"
            :class="b24ui.close({ class: props.b24ui?.close })"
            @click.stop
          />
        </slot>
      </ToastClose>
    </div>

    <B24Progress
      v-if="props.progress && open && remaining > 0 && totalDuration"
      :model-value="remaining / totalDuration * 100"
      :color="props.color"
      v-bind="typeof props.progress === 'object' ? props.progress : {}"
      size="sm"
      data-slot="progress"
      :class="b24ui.progress({ class: props.b24ui?.progress })"
    />
  </ToastRoot>
</template>
