<script>
import theme from "#build/b24ui/chat-prompt-submit";
</script>

<script setup>
import { computed } from "vue";
import { useForwardProps } from "reka-ui";
import { reactiveOmit } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useLocale } from "../composables/useLocale";
import { transformUI } from "../utils";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
import B24Button from "./Button.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  status: { type: String, required: false, default: "ready" },
  icon: { type: [Function, Object], required: false },
  color: { type: null, required: false, default: "air-primary" },
  streamingIcon: { type: [Function, Object], required: false },
  streamingColor: { type: null, required: false, default: "air-secondary-accent-2" },
  submittedIcon: { type: [Function, Object], required: false },
  submittedColor: { type: null, required: false, default: "air-secondary-no-accent" },
  errorIcon: { type: [Function, Object], required: false },
  errorColor: { type: null, required: false, default: "air-primary-alert" },
  b24ui: { type: void 0, required: false },
  class: { type: null, required: false },
  label: { type: String, required: false },
  activeColor: { type: null, required: false },
  depth: { type: null, required: false },
  activeDepth: { type: null, required: false },
  size: { type: null, required: false },
  rounded: { type: Boolean, required: false },
  block: { type: Boolean, required: false },
  loadingAuto: { type: Boolean, required: false },
  normalCase: { type: Boolean, required: false },
  useWait: { type: Boolean, required: false },
  useClock: { type: Boolean, required: false },
  useDropdown: { type: Boolean, required: false },
  onClick: { type: [Function, Array], required: false },
  activeClass: { type: String, required: false },
  inactiveClass: { type: String, required: false },
  avatar: { type: Object, required: false },
  loading: { type: Boolean, required: false },
  as: { type: null, required: false },
  type: { type: null, required: false },
  disabled: { type: Boolean, required: false },
  active: { type: Boolean, required: false },
  exact: { type: Boolean, required: false },
  exactQuery: { type: [Boolean, String], required: false },
  exactHash: { type: Boolean, required: false },
  isAction: { type: Boolean, required: false },
  to: { type: null, required: false },
  href: { type: null, 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 },
  prefetchedClass: { type: String, required: false },
  prefetch: { type: Boolean, required: false },
  prefetchOn: { type: [String, Object], required: false },
  noPrefetch: { type: Boolean, required: false },
  trailingSlash: { type: String, required: false },
  exactActiveClass: { type: String, required: false },
  ariaCurrentValue: { type: String, required: false },
  viewTransition: { type: Boolean, required: false },
  replace: { type: Boolean, required: false }
});
const emits = defineEmits(["stop", "reload"]);
const slots = defineSlots();
const { t } = useLocale();
const appConfig = useAppConfig();
const buttonProps = useForwardProps(reactiveOmit(props, "icon", "color", "status", "streamingIcon", "streamingColor", "submittedIcon", "submittedColor", "errorIcon", "errorColor", "class", "b24ui"));
const statusButtonProps = computed(() => ({
  ready: {
    icon: props.icon || icons.imSend,
    color: props.color,
    type: "submit"
  },
  submitted: {
    icon: props.submittedIcon || icons.stop,
    color: props.submittedColor,
    onClick() {
      emits("stop");
    }
  },
  streaming: {
    icon: props.streamingIcon || icons.stop,
    color: props.streamingColor,
    onClick() {
      emits("stop");
    }
  },
  error: {
    icon: props.errorIcon || icons.reload,
    color: props.errorColor,
    onClick() {
      emits("reload");
    }
  }
})[props.status]);
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatPromptSubmit || {} })());
</script>

<template>
  <B24Button
    v-bind="{
  ...buttonProps,
  ...statusButtonProps,
  'aria-label': t('chatPromptSubmit.label'),
  'rounded': true,
  ...$attrs
}"
    :aria-label="t('chatPromptSubmit.label')"
    data-slot="base"
    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
    :b24ui="transformUI(b24ui, props.b24ui)"
  >
    <template v-for="(_, name) in slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData" />
    </template>
  </B24Button>
</template>
