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

<script setup>
import { computed, toRef, useTemplateRef } from "vue";
import { Primitive } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useForwardProps } from "../composables/useForwardProps";
import { useIMEGuard } from "../composables/useIMEGuard";
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 },
  submitOnEnter: { type: Boolean, required: false, default: true },
  error: { type: Error, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, 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 props = useComponentProps("chatPrompt", _props);
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", "body"]);
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.chatPrompt || {} })({
  variant: props.variant
}));
const textareaRef = useTemplateRef("textareaRef");
function submit(e) {
  if (model.value.trim() === "") {
    return;
  }
  emits("submit", e ?? new Event("submit"));
}
function blur(e) {
  textareaRef.value?.textareaRef?.blur();
  emits("close", e ?? new Event("close"));
}
const { onKeydown: onEnter, onCompositionEnd } = useIMEGuard((event) => {
  submit(event);
});
function handleEnter(event) {
  if (props.submitOnEnter) {
    if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return;
  } else {
    if (!event.ctrlKey && !event.metaKey) return;
  }
  onEnter(event);
}
function onKeydown(event) {
  if (event.key === "Escape") {
    blur(event);
  } else if (event.key === "Enter") {
    handleEnter(event);
  }
}
defineExpose({
  textareaRef: toRef(() => textareaRef.value?.textareaRef)
});
</script>

<template>
  <Primitive :as="props.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>

    <slot
      name="body"
      :submit="submit"
      :close="blur"
      :placeholder="props.placeholder || t('chatPrompt.placeholder')"
      :disabled="Boolean(props.error) || props.disabled"
      :b24ui="b24ui"
    >
      <B24Textarea
        ref="textareaRef"
        v-model="model"
        :placeholder="props.placeholder || t('chatPrompt.placeholder')"
        :disabled="Boolean(props.error) || props.disabled"
        no-border
        fixed
        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="onKeydown"
        @compositionend="onCompositionEnd"
      >
        <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
          <slot :name="name" v-bind="slotData" />
        </template>
      </B24Textarea>
    </slot>

    <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>
