<script setup lang="ts">
import { ref, watch } from 'vue';

import { preferences } from '@easyflow/preferences';

import { ElEmpty } from 'element-plus';
import { JsonViewer } from 'vue3-json-viewer';

import { getEmptyStateImageUrl } from '#/utils/assets';

import 'vue3-json-viewer/dist/vue3-json-viewer.css';

withDefaults(
  defineProps<{
    value: unknown;
    plain?: boolean;
  }>(),
  {
    plain: false,
  },
);

const themeMode = ref(preferences.theme.mode);
watch(
  () => preferences.theme.mode,
  (newVal) => {
    themeMode.value = newVal;
  },
);
</script>

<template>
  <div class="res-container" :class="{ 'is-plain': plain }">
    <JsonViewer v-if="value" :value="value" copyable :theme="themeMode" />
    <ElEmpty :image="getEmptyStateImageUrl(preferences.theme.mode)" v-else />
  </div>
</template>

<style scoped>
.res-container {
  padding: 10px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
}

.res-container.is-plain {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
</style>
