<script setup>
import { computed } from "vue";

const props = defineProps(["df"]);

// Note: In jlocal, we create a static preview of the text editor
// The actual rich text editing will be done in the form view
const editorPlaceholder = computed(() => {
  return props.df.default || 'Enter rich text here...';
});
</script>

<template>
  <div class="control editable">
    <div class="field-controls">
      <slot name="label" />
      <slot name="actions" />
    </div>
    <div class="text-editor-preview">
      <div class="editor-toolbar">
        <div class="toolbar-group">
          <span class="toolbar-btn" title="Bold">B</span>
          <span class="toolbar-btn" title="Italic">I</span>
          <span class="toolbar-btn" title="Underline">U</span>
        </div>
        <div class="toolbar-group">
          <span class="toolbar-btn" title="List">≡</span>
          <span class="toolbar-btn" title="Link">🔗</span>
        </div>
      </div>
      <div class="editor-content">
        <p class="placeholder-text">{{ editorPlaceholder }}</p>
      </div>
    </div>
    <div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
  </div>
</template>

<style lang="scss" scoped>
.text-editor-preview {
  border: 1px solid var(--n-border-color, #e0e0e6);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;

  .editor-toolbar {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--n-border-color, #e0e0e6);
    background: #fafafa;
    pointer-events: none;

    .toolbar-group {
      display: flex;
      gap: 4px;
    }

    .toolbar-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 24px;
      font-size: 12px;
      font-weight: 600;
      color: #666;
      border: 1px solid #ddd;
      border-radius: 3px;
      background: #fff;
    }
  }

  .editor-content {
    min-height: 120px;
    padding: 12px;
    cursor: pointer;

    .placeholder-text {
      color: #999;
      margin: 0;
    }
  }
}

.description {
  font-size: 12px;
  color: var(--n-text-color-3, #999);
}
</style>
