<template>
  <component
    style="overflow: hidden"
    v-if="!(componentName === 'TemplateStyle' && isRender)"
    :is="componentName"
    :widget="widget"
    :formBody="formBody"
    :isRender="isRender"
    v-on:change="$emit('changePost', $event)"
    v-on:submit="$emit('submit')"
    @templateStyle="formBody.sharedStyle = $event"
  ></component>
</template>

<script>
//Vue 3 is having a special function to define these async functions
import * as comp from "../helperFiles/fileImports";

export default {
  name: "RenderWidget",
  components: {
    ...comp,
  },
  //I am passing the name of the Component as a prop
  props: {
    componentName: {
      type: String,
      required: true,
    },
    formBody: {
      type: Object,
      required: true,
    },
    widget: {
      type: Object,
      required: true,
    },
    isRender: Boolean,
  },
  computed: {
    // comp() {
    //   return () =>
    //     import(
    //       /* webpackChunkName: "widgets" */ `../widgets/${this.componentName}.vue`
    //     );
    // },
  },
};
</script>
