<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import type { ChatroomPublic } from '@/types/chatroom.js'
import { api } from '@/tools/web.js'
import type { ReturnDto } from '@/types/response.js'
import { useMessage } from 'naive-ui'
import UploadFileModal from '@/components/file/UploadFileModal.vue'
import SelectFileModal from '@/components/file/SelectFileModal.vue'
import type { UploadFileDto } from '@/types/user.js'

const MESSAGE = useMessage()

const showModal = defineModel<boolean>('showModal', { required: true })

const showSelectModal = ref(false)
const showUploadModal = ref(false)
const files = ref<UploadFileDto[]>([])
const selectFiles = ref<UploadFileDto[]>([])
const image_url = computed(() => selectFiles.value.at(0)?.download_url)

const createChatroomForm = ref<ChatroomPublic>({
  id: 0,
  name: '',
  description: '',
  feature_image: '',
  script_template_id: 0,
  script_template_version: '',
})

watch(image_url, () => {
  if (image_url.value) {
    createChatroomForm.value.feature_image = image_url.value
  }
})

async function loadFiles() {
  return await api.get('/file/').then((res) => (files.value = res.data as UploadFileDto[]))
}

function onSubmit() {
  api
    .post('/chatroom/', JSON.stringify(createChatroomForm.value))
    .then((res) => res.data as ReturnDto)
    .then((data) => {
      if (data.success) {
        MESSAGE.success('聊天室创建成功 ~')
        showModal.value = false
      } else {
        throw TypeError('未知原因地后端业务失败')
      }
    })
    .catch((err) => {
      MESSAGE.error(`聊天室创建失败：${err}`)
    })
}
</script>

<template>
  <n-modal
    v-model:show="showModal"
    preset="card"
    title="创建聊天室"
    content-scrollable
    style="width: 800px"
  >
    <n-form
      :model="createChatroomForm"
      label-placement="left"
      label-align="right"
      label-width="auto"
    >
      <n-form-item path="name" label="名称">
        <n-input v-model:value="createChatroomForm.name" />
      </n-form-item>
      <n-form-item path="description" label="简介">
        <n-input type="textarea" v-model:value="createChatroomForm.description" />
      </n-form-item>
      <n-form-item path="feature_image" label="特色图像">
        <n-flex style="width: 100%" :wrap="false">
          <n-input
            v-model:value="createChatroomForm.feature_image"
            placeholder="留空以使用默认图像"
          />
          <n-button secondary type="info" @click="showSelectModal = true">选择</n-button>
          <n-button secondary type="warning" @click="showUploadModal = true">上传</n-button>
        </n-flex>
      </n-form-item>
      <n-form-item label="确认？">
        <n-button secondary type="primary" @click="onSubmit()">确认！</n-button>
      </n-form-item>
    </n-form>

    <select-file-modal
      :max="1"
      :extensions="['png', 'jpeg', 'jpg']"
      :load-files="loadFiles"
      v-model:show-modal="showSelectModal"
      v-model:select-files="selectFiles"
    />
    <upload-file-modal v-model:show-modal="showUploadModal" :after-leave="loadFiles" />
  </n-modal>
</template>

<style scoped></style>
