<script setup lang="ts">
  import { formInjectionKey } from '~/constants/injection-keys'

  export interface ResearchInputData {
    query: string
    breadth: number
    depth: number
    numQuestions: number
  }

  defineProps<{
    isLoadingFeedback: boolean
  }>()

  const emit = defineEmits<{
    (e: 'submit'): void
  }>()

  const form = inject(formInjectionKey)!

  const isSubmitButtonDisabled = computed(
    () =>
      !form.value.query ||
      !form.value.breadth ||
      !form.value.depth ||
      !form.value.numQuestions,
  )

  function handleSubmit() {
    emit('submit')
  }
</script>

<template>
  <UCard>
    <template #header>
      <h2 class="font-bold">{{ $t('researchTopic.title') }}</h2>
    </template>
    <div class="flex flex-col gap-2">
      <UFormField :label="$t('researchTopic.inputTitle')" required>
        <UTextarea
          class="w-full"
          v-model="form.query"
          :rows="3"
          :placeholder="$t('researchTopic.placeholder')"
          required
        />
      </UFormField>

      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <UFormField :label="$t('researchTopic.numOfQuestions')" required>
          <template #help>
            {{ $t('researchTopic.numOfQuestionsHelp') }}
          </template>
          <UInput
            v-model="form.numQuestions"
            class="w-full"
            type="number"
            :min="1"
            :max="5"
            :step="1"
          />
        </UFormField>

        <UFormField :label="$t('researchTopic.depth')" required>
          <template #help>{{ $t('researchTopic.depthHelp') }}</template>
          <UInput
            v-model="form.depth"
            class="w-full"
            type="number"
            :min="1"
            :max="5"
            :step="1"
          />
        </UFormField>

        <UFormField :label="$t('researchTopic.breadth')" required>
          <template #help>{{ $t('researchTopic.breadthHelp') }}</template>
          <UInput
            v-model="form.breadth"
            class="w-full"
            type="number"
            :min="1"
            :max="5"
            :step="1"
          />
        </UFormField>
      </div>
    </div>

    <template #footer>
      <UButton
        type="submit"
        color="primary"
        :loading="isLoadingFeedback"
        :disabled="isSubmitButtonDisabled"
        block
        @click="handleSubmit"
      >
        {{
          isLoadingFeedback
            ? $t('researchTopic.researching')
            : $t('researchTopic.start')
        }}
      </UButton>
    </template>
  </UCard>
</template>
