<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 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 handleConfirm(inputType: 'random' | 'input') {
  autoConfigInputType.value = inputType
  emit('confirm', 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>
          {{
            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>

    <template #footer>
      <div class="flex w-full items-center justify-end">
        <NButton class="h-[32px]! rounded-md! px-6!" @click="handleCloseModal">
          {{
            t(
              'personal_space_module.agent_module.agent_setting_module.agent_config_module.auto_config_modal_module.cancel_btn_text',
            )
          }}
        </NButton>
        <NButton
          :loading="isRandomBtnLoading"
          class="h-[32px]! rounded-md! px-6! ml-4!"
          @click="handleConfirm('random')"
        >
          {{
            t(
              'personal_space_module.agent_module.agent_setting_module.agent_config_module.auto_config_modal_module.random_generate_btn_text',
            )
          }}
        </NButton>
        <NButton
          :loading="isInputBtnLoading"
          type="primary"
          :disabled="isDisabledBtn"
          class="h-[32px]! px-6! rounded-md! ml-4!"
          @click="handleConfirm('input')"
        >
          {{
            t(
              'personal_space_module.agent_module.agent_setting_module.agent_config_module.auto_config_modal_module.ai_generate_btn_text',
            )
          }}
        </NButton>
      </div>
    </template>
  </CustomModal>
</template>
