<script setup lang="ts">
import { ref, reactive, toRefs, nextTick, useTemplateRef, watch } from 'vue'
import Sender from './Sender.vue'

interface ContentItem {
  id: string
  type: 'text' | 'input'
  value: string
  placeholder?: string
}

const props = defineProps({
  content: {
    type: Array,
    default: () => []
  }
})

const getFullText = () => {
  if (assistModel.value) {
    return senderRef.value?.getContext().replaceAll('[', '').replaceAll(']', '')
  }
  return textareaValue.value
}

const textareaValue = ref('')
const assistModel = ref(false)
const senderRef = useTemplateRef<HTMLDivElement>('senderRef')
const handleClickAssistBtn = () => {
  assistModel.value = !assistModel.value
}

const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')

defineExpose({
  getFullText
  // content
})
</script>

<template>
  <div v-show="!assistModel" class="textarea-container">
    <textarea
      class="area"
      v-model="textareaValue"
      ref="textareaRef"
      :placeholder="$t('poseTransfer.PormptPlaceholder')"
    />
    <div class="asistant-btn" @click="handleClickAssistBtn">
      <i class="fi fi-bs-magic-wand asistant-icon"></i>
      <span>{{ $t('ProductImg.PromptAssit') }}</span>
    </div>
  </div>
  <div v-show="assistModel" class="sender-container">
    <div class="sender-wrapper">
      <Sender ref="senderRef" :nodeList="content" />
    </div>
    <div class="asistant-btn" @click="handleClickAssistBtn">
      <i class="fi fi-bs-magic-wand asistant-icon"></i>
      <span>{{ $t('ProductImg.PromptAssit') }}</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
.promptInput {
  --promptInputBorderRadius: 10px;
  --promptInputBorder: 1px solid #000;
  --promptInputPadding: 1.5rem;

  width: 100%;
  font-weight: 500;
  border-radius: var(--promptInputBorderRadius);
  border: var(--promptInputBorder);
  padding: var(--promptInputPadding);
  background: white;
  line-height: 1.6;
  outline: none;
  white-space: pre-wrap;
  user-select: text;
  cursor: text;
  position: relative;
  padding-bottom: 4rem;
  box-sizing: content-box;
}
.sender-container {
  position: relative;
  border-radius: 10px;
  border: 1px solid #000;
  padding: 1.5rem;
  font-size: 1.8rem;
  .sender-wrapper {
    min-height: 12rem;
    max-height: 14rem;
    overflow-y: auto;
    margin-bottom: 1rem;
  }
}

.textarea-container {
  position: relative;
  border-radius: 10px;
  border: 1px solid #000;
  padding: 1.5rem;
  height: auto;
  font-size: 1.8rem;
  .area {
    width: 100%;
    min-height: 12rem;
    max-height: 14rem;
    background: white;
    line-height: 1.6;
    outline: none;
    white-space: pre-wrap;
    user-select: text;
    cursor: text;
    position: relative;
    resize: none;
    border: none;
    overflow-y: auto;
  }
}

.asistant-btn {
  height: 2.3rem;
  padding: 0 0.6rem;
  font-size: 1rem;
  font-weight: 400;
  width: fit-content;
  color: #313131;
  // position: absolute;
  // bottom: 1.3rem;
  // left: 1.3rem;
  display: flex;
  column-gap: 0.3rem;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
  border: 1px solid #dfdfdf;
  border-radius: 0.5rem;
  cursor: pointer;
  .asistant-icon {
    font-size: 1rem;
    margin-right: 0;
    width: initial;
  }
}
</style>
