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

<script setup>
import { computed, toRef, useTemplateRef } from "vue";
import { Primitive, useForwardProps } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useLocale } from "../composables/useLocale";
import { omit, transformUI } from "../utils";
import { tv } from "../utils/tv";
import B24Textarea from "./Textarea.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  as: { type: null, required: false, default: "form" },
  placeholder: { type: String, required: false },
  variant: { type: null, required: false },
  error: { type: Error, required: false },
  class: { type: null, required: false },
  b24ui: { type: void 0, required: false },
  rows: { type: Number, required: false, default: 1 },
  autofocus: { type: Boolean, required: false, default: true },
  autofocusDelay: { type: Number, required: false },
  autoresize: { type: Boolean, required: false, default: true },
  autoresizeDelay: { type: Number, required: false },
  maxrows: { type: Number, required: false },
  icon: { type: [Function, Object], required: false },
  avatar: { type: Object, required: false },
  loading: { type: Boolean, required: false },
  disabled: { type: Boolean, required: false }
});
const emits = defineEmits(["submit", "close"]);
const slots = defineSlots();
const model = defineModel({ type: String, ...{ default: "" } });
const { t } = useLocale();
const appConfig = useAppConfig();
const textareaProps = useForwardProps(reactivePick(props, "rows", "autofocus", "autofocusDelay", "autoresize", "autoresizeDelay", "maxrows", "icon", "avatar", "loading"));
const getProxySlots = () => omit(slots, ["header", "footer", "default"]);
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatPrompt || {} })({
  variant: props.variant
}));
const textareaRef = useTemplateRef("textareaRef");
function submit(e) {
  if (model.value.trim() === "") {
    return;
  }
  emits("submit", e);
}
function blur(e) {
  textareaRef.value?.textareaRef?.blur();
  emits("close", e);
}
defineExpose({
  textareaRef: toRef(() => textareaRef.value?.textareaRef)
});
</script>

<template>
  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" @submit.prevent="submit">
    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
      <slot name="header" />
    </div>

    <B24Textarea
      ref="textareaRef"
      v-model="model"
      :placeholder="placeholder || t('chatPrompt.placeholder')"
      :disabled="Boolean(error) || disabled"
      no-border
      v-bind="{ ...textareaProps, ...$attrs }"
      :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), props.b24ui)"
      data-slot="body"
      :class="b24ui.body({ class: props.b24ui?.body })"
      @keydown.enter.exact.prevent="submit"
      @keydown.esc="blur"
    >
      <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>
    </B24Textarea>

    <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
      <slot name="footer" />
      <slot name="default" :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), props.b24ui)" />
    </div>
  </Primitive>
</template>
