<template>
  <div class="card" style="min-width: 15em">
    <div class="card-header">
      <h5 class="card-title mb-0">Settings</h5>
    </div>
    <div class="card-body">
      <div class="form-group">
        <label class="form-label" :for="uid + '_temperature'">Temperature ({{ temperature }})</label>
        <input class="form-range" type="range" :id="uid + '_temperature'" v-model="temperature" min="0" max="1"
               step="0.001">
      </div>
      <div class="form-group">
        <label class="form-label" :for="uid + '_tokenCount'">Token count ({{ tokenCount }})</label>
        <input class="form-range" type="range" :id="uid + '_tokenCount'" v-model="tokenCount" min="0" max="500">
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Options, Vue} from 'vue-class-component';
import {Prop} from 'vue-property-decorator';
import {getCurrentInstance} from 'vue';
import {toast} from 'vue3-toastify';
import {AiInstanceVmV1} from 'ai-oas';
import {ApiStore} from '@/stores/ApiStore';

@Options({
  name: 'Settings',
  methods: {getCurrentInstance},
  components: {},
})
export default class Settings extends Vue {
  @Prop({required: true})
  readonly aiInstance!: AiInstanceVmV1;
  readonly apiStore = new ApiStore();

  private temperatureSaveTimeout: number | undefined = undefined;
  private tokenCountSaveTimeout: number | undefined = undefined;

  private oldTemperature: number = 0;
  private oldTokenCount: number = 0;

  get temperature(): number {
    return this.aiInstance.configuration.temperature;
  }

  set temperature(val: number) {
    if (this.temperatureSaveTimeout) {
      clearTimeout(this.temperatureSaveTimeout);
      this.temperatureSaveTimeout = undefined;
    } else {
      this.oldTemperature = this.temperature;
    }
    this.aiInstance.configuration.temperature = val;

    this.temperatureSaveTimeout = setTimeout(() => {
      this.aiInstance.configuration.temperature = val;
      this.apiStore.aiConfigurationApi
          .update(this.aiInstance.configuration)
          .then(_ => this.aiInstance.configuration.temperature = val)
          .catch(e => {
            toast.error('Error while setting temperature: ' + JSON.stringify(e));
            this.aiInstance.configuration.temperature = this.oldTemperature;
          });
    }, 500);
  }

  get tokenCount(): number {
    return this.aiInstance.configuration.tokenCount;
  }

  set tokenCount(val: number) {
    if (this.tokenCountSaveTimeout) {
      clearTimeout(this.tokenCountSaveTimeout);
      this.tokenCountSaveTimeout = undefined;
    } else {
      this.oldTokenCount = this.tokenCount;
    }
    this.aiInstance.configuration.tokenCount = val;

    this.tokenCountSaveTimeout = setTimeout(() => {
      this.aiInstance.configuration.tokenCount = val;
      this.apiStore.aiConfigurationApi
          .update(this.aiInstance.configuration)
          .then(_ => this.aiInstance.configuration.tokenCount = val)
          .catch(e => {
            toast.error('Error while setting tokenCount: ' + JSON.stringify(e));
            this.aiInstance.configuration.tokenCount = this.oldTokenCount;
          });
    }, 500);
  }

  get uid(): string {
    return '' + getCurrentInstance()?.uid!;
  }
}
</script>
