<script setup lang="ts">
import type {BotInfo} from '@easyflow/types';

import {computed, onMounted, ref} from 'vue';
import {useRoute} from 'vue-router';

import {tryit} from 'radash';

import {getBotDetails} from '#/api';
import {hasPermission} from '#/api/common/hasPermission';

import Config from './config.vue';
import Preview from './preview.vue';
import Prompt from './prompt.vue';

const route = useRoute();
const hasSavePermission = computed(() =>
  hasPermission(['/api/v1/bot/save', '/api/v1/bot/updateLlmId']),
);
const bot = ref<BotInfo>();

onMounted(() => {
  if (route.params.id) {
    fetchBotDetail(route.params.id as string);
  }
});

const fetchBotDetail = async (id: string) => {
  const [, res] = await tryit(getBotDetails)(id);

  if (res?.errorCode === 0) {
    bot.value = res.data;
  }
};
</script>

<template>
  <div class="settings-container">
    <div class="row-container">
      <div class="row-item">
        <Prompt :bot="bot" :has-save-permission="hasSavePermission" />
      </div>
      <div class="row-item">
        <Config :bot="bot" :has-save-permission="hasSavePermission" />
      </div>
      <div class="row-item">
        <Preview :bot="bot" />
      </div>
    </div>
  </div>
</template>
<style scoped>
.settings-container {
  height: calc(100vh - 90px);
  padding: 20px;
}
.row-container {
  height: 100%;
  display: flex;
  gap: 20px;
}
.row-item {
  height: 100%;
  flex: 1;
  min-width: 0;
}
</style>
