<template>
  <div class="tw:flex-1 tw:flex tw:flex-col tw:gap-2 tw:h-full">
    <Message v-if="isCustom" severity="info" class="tw:mb-2">
      Вы находитесь в режиме ручного редактирования схемы.
      <a
        href="https://formkit.com/essentials/schema"
        target="_blank"
        title="Документация FormKit Schema"
        class="tw:ml-1 tw:text-blue-600 hover:tw:underline"
      >
        Документация по схеме <i class="fa fa-external-link"></i>
      </a>
    </Message>
    <Panel class="tw:flex-1 tw:flex tw:flex-col tw:overflow-hidden">
      <template #header>
        <div class="tw:flex tw:justify-between tw:items-center tw:w-full">
          <div class="tw:flex tw:items-center tw:gap-2">
            <span class="tw:font-medium">Редактор FormKit Schema</span>
          </div>
          <div v-if="error" class="tw:text-red-500 tw:text-sm">
            <i class="fa fa-exclamation-circle"></i> {{ error }}
          </div>
        </div>
      </template>
      <div class="tw:flex-1 tw:h-full tw:overflow-hidden">
        <Codemirror
          :modelValue="modelValue"
          @update:modelValue="onCodeChange"
          placeholder="Code goes here..."
          :style="{ height: '600px' }"
          :autofocus="true"
          :indent-with-tab="true"
          :tab-size="2"
          :extensions="extensions"
        />
      </div>
    </Panel>
  </div>
</template>

<script setup>
import { Message, Panel } from 'primevue';
import { Codemirror } from 'vue-codemirror';
import { json } from '@codemirror/lang-json';
import { oneDark } from '@codemirror/theme-one-dark';

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  error: {
    type: String,
    default: null
  },
  isCustom: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'change']);

const extensions = [json(), oneDark];

function onCodeChange(newVal) {
  emit('update:modelValue', newVal);
  emit('change', newVal);
}
</script>
