<template>
  <div>
    <q-page class="q-mt-sm q-pa-sm">
      <div class="column text-center">
        <div class="row justify-center">
          <q-select
            v-if="queryList"
            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
            outline
            v-model="querySel"
            :options="queryList"
            :label="t('queryai.selectquery') + `:`"
            emit-value
            style="min-width: 200px"
            map-options
            option-value="_id"
            option-label="descr"
          >
          </q-select>

          <q-select
            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
            outline
            v-model="model"
            :options="modelList"
            style="min-width: 200px"
            :label="t('queryai.model') + `:`"
            emit-value
            map-options
            option-value="value"
            option-label="label"
          >
          </q-select>
          <q-select
            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
            outline
            v-model="contestsystem"
            :options="contestSysteList"
            style="min-width: 200px"
            :label="t('queryai.contestsystem') + `:`"
            emit-value
            map-options
            option-value="value"
            option-label="label"
          >
          </q-select>
          <q-select
            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
            outline
            v-model="max_tokens"
            style="min-width: 200px"
            :options="tokenList"
            :label="t('queryai.numtoken') + `:`"
            emit-value
            map-options
            option-value="value"
            option-label="label"
          >
          </q-select>
          <q-select
            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
            outline
            v-model="temperatura"
            style="min-width: 200px"
            :options="tempList"
            :label="t('queryai.temperatura') + `:`"
            emit-value
            map-options
            option-value="value"
            option-label="label"
          >
          </q-select>
          <q-select
            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
            outline
            v-model="outputType"
            style="min-width: 200px"
            :options="outputTypeList"
            :label="t('queryai.outputType') + `:`"
            emit-value
            map-options
            option-value="value"
            option-label="label"
          >
          </q-select>
        </div>
        <div class="row justify-center">
          <q-toggle
            label="Stream"
            v-model="stream"
            color="green"
            icon="fas fa-stream"
            keep-color
          >
          </q-toggle>
          <q-toggle
            :label="t('queryai.withexplain')"
            v-model="withexplain"
            color="green"
            icon="fas fa-comment"
            keep-color
          >
          </q-toggle>
        </div>
        <q-separator></q-separator>
      </div>

      <q-card v-if="outputvisibile" class="q-mt-sm">
        <q-card-section>
          <q-scroll-area style="height: 300px">
            <pre class="response-content">{{ outputvisibile }}</pre>
          </q-scroll-area>
          <q-btn
            flat
            round
            dense
            label="Copia la Risposta"
            icon="content_copy"
            @click="copyToClipboard"
            v-tooltip="'Copia negli appunti'"
          />
          <pre class="response-reason">Esito: {{ finish_reason }}</pre>
        </q-card-section>
      </q-card>

      <div class="q-mt-md q-gutter-y-md">
        <q-input
          v-model="inputPrompt"
          filled
          autogrow
          type="textarea"
          label="Inserisci la tua richiesta"
          class="q-mb-md"
          autofocus
          @keydown.enter.prevent="submitPrompt"
        />

        <q-banner
          v-if="errorMessage"
          class="q-mt-md bg-negative text-white"
          rounded
        >
          {{ errorMessage }}
        </q-banner>

        <div class="text-center">
          <q-btn
            :label="`Invia a ` + modelLabel"
            type="submit"
            color="primary"
            :disable="!inputPrompt"
            :loading="isLoading"
            icon="send"
            @click="handleSubmit"
          />
        </div>

        <q-inner-loading :showing="isLoading">
          <q-spinner-gears size="50px" color="primary" />
          <div class="q-mt-sm">Elaborazione richiesta...</div>
        </q-inner-loading>
      </div>
    </q-page>
  </div>
</template>
<script lang="ts" src="./CAITools.ts">
</script>

<style lang="scss">
@import './CAITools.scss';
</style>
