<template>
  <ElInput
    class="vtj-expression-setter"
    v-model="textValue"
    @change="handleChange">
    <template #prefix>{{ prefix }}</template>
    <template #suffix>{{ suffix }}</template>
  </ElInput>
</template>
<script lang="ts" setup>
import { ElInput } from 'element-plus';
import { JSExpression } from '@vtj/engine';
import { ref, watch } from 'vue';

export interface Props {
  modelValue?: JSExpression;
}

const prefix = `{{`;
const suffix = `}}`;

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => {
    return { type: 'JSExpression', value: '' };
  }
});
const emit = defineEmits(['change']);

const textValue = ref(props.modelValue.value);

watch(
  () => props.modelValue.value,
  (v) => {
    textValue.value = v;
  }
);

const handleChange = (value: string) => {
  const expression = {
    type: 'JSExpression',
    value
  };
  emit('change', expression);
};
</script>
