<script setup lang="ts">
import type { ChatImageAttachment, ChatImageLoader } from '@easyflow/common-ui';

import { computed, ref } from 'vue';

import { ChatImageAttachments } from '@easyflow/common-ui';
import { Paperclip, Promotion } from '@element-plus/icons-vue';
import { ElButton, ElInput, ElMessage } from 'element-plus';

const props = withDefaults(
  defineProps<{
    loading?: boolean;
    images?: ChatImageAttachment[];
    imageEnabled?: boolean;
    imageLoader?: ChatImageLoader;
    modelValue?: string;
    placeholder?: string;
  }>(),
  { imageEnabled: true },
);

const emit = defineEmits<{
  addFiles: [files: File[]];
  removeImage: [item: ChatImageAttachment];
  retryImage: [item: ChatImageAttachment];
  send: [text: string];
  stop: [];
  'update:modelValue': [value: string];
}>();

const text = computed({
  get: () => props.modelValue || '',
  set: (value: string) => emit('update:modelValue', value),
});
const fileInput = ref<HTMLInputElement>();
const dragActive = ref(false);
const hasReadyImage = computed(() =>
  (props.images || []).some((item) => item.status === 'ready'),
);
const hasPendingImage = computed(() =>
  (props.images || []).some((item) => item.status !== 'ready'),
);
const canSend = computed(
  () =>
    (text.value.trim().length > 0 || hasReadyImage.value) &&
    (!hasReadyImage.value || props.imageEnabled !== false) &&
    !hasPendingImage.value &&
    !props.loading,
);

function send() {
  const value = text.value.trim();
  if (
    (!value && !hasReadyImage.value) ||
    props.loading ||
    hasPendingImage.value
  )
    return;
  emit('send', value);
}

function chooseFiles() {
  if (props.imageEnabled === false) return;
  fileInput.value?.click();
}

function handleFiles(event: Event) {
  const target = event.target as HTMLInputElement;
  const files = [...(target.files || [])];
  if (files.length) emit('addFiles', files);
  target.value = '';
}

function handlePaste(event: ClipboardEvent) {
  if (props.imageEnabled === false) return;
  const files = [...(event.clipboardData?.files || [])].filter((file) =>
    file.type.startsWith('image/'),
  );
  if (!files.length) return;
  event.preventDefault();
  emit('addFiles', files);
  ElMessage.success(
    files.length === 1 ? '已粘贴图片' : `已粘贴 ${files.length} 张图片`,
  );
}

function handleDragEnter(event: DragEvent) {
  if (
    !props.loading &&
    props.imageEnabled !== false &&
    (props.images?.length || 0) < 5 &&
    [...(event.dataTransfer?.types || [])].includes('Files')
  ) {
    dragActive.value = true;
  }
}

function handleDragLeave(event: DragEvent) {
  const container = event.currentTarget as HTMLElement;
  if (
    !(event.relatedTarget instanceof Node) ||
    !container.contains(event.relatedTarget)
  ) {
    dragActive.value = false;
  }
}

function handleDrop(event: DragEvent) {
  dragActive.value = false;
  if (
    props.loading ||
    props.imageEnabled === false ||
    (props.images?.length || 0) >= 5
  )
    return;
  const files = [...(event.dataTransfer?.files || [])].filter((file) =>
    file.type.startsWith('image/'),
  );
  if (files.length) emit('addFiles', files);
}

function stop() {
  if (!props.loading) return;
  emit('stop');
}

function handleKeydown(event: Event | KeyboardEvent) {
  if (!(event instanceof KeyboardEvent)) return;
  if (event.key !== 'Enter' || event.shiftKey) return;
  event.preventDefault();
  send();
}
</script>

<template>
  <div
    class="ai-prompt-input"
    :class="{ 'is-dragging': dragActive }"
    @dragenter.prevent="handleDragEnter"
    @dragover.prevent
    @dragleave.prevent="handleDragLeave"
    @drop.prevent="handleDrop"
  >
    <ChatImageAttachments
      v-if="images?.length"
      class="ai-prompt-input__images"
      :items="images"
      :image-loader="imageLoader"
      removable
      retryable
      @remove="emit('removeImage', $event)"
      @retry="emit('retryImage', $event)"
    />
    <ElInput
      v-model="text"
      class="ai-prompt-input__textarea"
      type="textarea"
      resize="none"
      :autosize="{ minRows: 1, maxRows: 5 }"
      :disabled="loading"
      :placeholder="placeholder || '输入消息'"
      @paste="handlePaste"
      @keydown="handleKeydown"
    />
    <input
      v-if="imageEnabled !== false"
      ref="fileInput"
      class="ai-prompt-input__file"
      type="file"
      accept=".png,.jpg,.jpeg,.webp,.gif,.bmp,image/png,image/jpeg,image/webp,image/gif,image/bmp"
      multiple
      @change="handleFiles"
    />
    <ElButton
      v-if="imageEnabled !== false"
      :icon="Paperclip"
      circle
      text
      :disabled="loading || (images?.length || 0) >= 5"
      aria-label="添加图片"
      title="添加图片"
      class="ai-prompt-input__attach"
      @click="chooseFiles"
    />
    <ElButton
      v-if="loading"
      type="primary"
      circle
      aria-label="中止"
      title="中止"
      class="ai-prompt-input__action is-stop"
      @click="stop"
    />
    <ElButton
      v-else
      type="primary"
      circle
      :icon="Promotion"
      :disabled="!canSend"
      aria-label="发送"
      class="ai-prompt-input__action"
      @click="send"
    />
  </div>
</template>

<style scoped>
.ai-prompt-input {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  padding: 8px;
  margin: 0 16px 16px;
  background: var(--el-bg-color);
  background: color-mix(in srgb, var(--el-bg-color) 92%, transparent);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-lighter);
}

.ai-prompt-input.is-dragging {
  background: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-5);
}

.ai-prompt-input__images {
  flex: 0 0 100%;
}

.ai-prompt-input__file {
  display: none;
}

.ai-prompt-input__attach {
  width: 36px;
  height: 36px;
}

.ai-prompt-input__textarea {
  flex: 1;
}

.ai-prompt-input__textarea :deep(.el-textarea__inner) {
  min-height: 36px !important;
  padding: 8px 10px;
  line-height: 20px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.ai-prompt-input__action {
  width: 36px;
  height: 36px;
}

.ai-prompt-input__action.is-stop::before {
  display: block;
  width: 12px;
  height: 12px;
  content: '';
  background: var(--el-color-white);
  border-radius: 2px;
}
</style>
