<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
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: 'confirm', value: string): void
}

const { t } = useI18n()

const props = defineProps<Props>()

const emit = defineEmits<Emits>()

const autoConfigInputValue = ref('')

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

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

const isInputBtnLoading = computed(() => {
  return props.btnLoading
})

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

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

function handleConfirm() {
  emit('confirm', autoConfigInputValue.value)
}
</script>

<template>
  <CustomModal
    v-model:is-show="showModal"
    :title="modalTitle"
    :width="600"
    :btn-disabled="isDisabledBtn"
    :btn-loading="isInputBtnLoading"
    :cancel-btn-text="t('common_module.cancel_btn_text')"
    :confirm-btn-text="t('common_module.ai_generate')"
    @close="handleCloseModal"
    @confirm="handleConfirm"
  >
    <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>
          {{
            t(
              'personal_space_module.agent_module.agent_setting_module.agent_config_module.auto_config_modal_module.generate_tip_message',
            )
          }}
        </span>
      </div>
      <NInput
        v-model:value="autoConfigInputValue"
        type="textarea"
        :rows="10"
        :disabled="false"
        :placeholder="
          t(
            'personal_space_module.agent_module.agent_setting_module.agent_config_module.auto_config_modal_module.auto_config_input_placeholder',
          )
        "
        class="rounded-lg!"
      />
    </template>
  </CustomModal>
</template>
