<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import CustomModal from '@/components/custom-modal/custom-modal.vue'
import CustomIcon from '@/components/custom-icon/custom-icon.vue'

interface Props {
  isShowModal: boolean
  btnLoading: boolean
  modalTitle: string
}

interface Emits {
  (e: 'update:isShowModal', value: boolean): void
  (e: 'comfirm', value: string): void
}

const props = defineProps<Props>()

const emit = defineEmits<Emits>()

const autoConfigInputValue = ref('')

const autoConfigInputType = ref<'random' | 'input'>('random')

const showModal = computed({
  get() {
    return props.isShowModal
  },
  set(value: boolean) {
    emit('update:isShowModal', value)
  },
})

const isDisabledBtn = computed(() => {
  return !autoConfigInputValue.value
})

const isRandomBtnLoading = computed(() => {
  return props.btnLoading && autoConfigInputType.value === 'random'
})

const isInputBtnLoading = computed(() => {
  return props.btnLoading && autoConfigInputType.value === 'input'
})

watch(
  () => showModal.value,
  () => {
    showModal.value && (autoConfigInputValue.value = '')
  },
)

function handleCloseModal() {
  emit('update:isShowModal', false)
}

function handleComfirm(inputType: 'random' | 'input') {
  autoConfigInputType.value = inputType
  emit('comfirm', inputType === 'random' ? '' : autoConfigInputValue.value)
}
</script>

<template>
  <CustomModal v-model:is-show="showModal" :title="modalTitle" :width="600">
    <template #content>
      <div class="mb-3 flex h-8 w-full items-center rounded bg-[#FFF4E6] px-4">
        <CustomIcon icon="ep:warning-filled" class="mr-2 h-4 w-4 text-[#FFA500]" />
        <span>生成结果将覆盖当前的配置内容，请确认是否继续生成</span>
      </div>
      <NInput
        v-model:value="autoConfigInputValue"
        type="textarea"
        :rows="10"
        :disabled="false"
        placeholder="请告诉我你想创建一个什么样的应用，大模型将为你自动生成"
        class="rounded-lg!"
      />
    </template>

    <template #footer>
      <div class="flex w-full items-center justify-end">
        <NButton class="h-[32px]! rounded-md! px-6!" @click="handleCloseModal"> 取 消 </NButton>
        <NButton
          :loading="isRandomBtnLoading"
          class="h-[32px]! rounded-md! px-6! ml-4!"
          @click="handleComfirm('random')"
        >
          随机生成
        </NButton>
        <NButton
          :loading="isInputBtnLoading"
          type="primary"
          :disabled="isDisabledBtn"
          class="h-[32px]! px-6! rounded-md! ml-4!"
          @click="handleComfirm('input')"
        >
          AI生成
        </NButton>
      </div>
    </template>
  </CustomModal>
</template>
