<template>
  <div
    :id="`preview-${data.id}`"
    :class="classes"
    :data-type="data.type"
    :style="styles"
  >
    <component :is="compName" :data="data" preview></component>
  </div>
</template>

<script>
import PreviewText from "../elements/text/ElemText";
import PreviewImage from "../elements/image/ElemImage";
import PreviewLine from "../elements/line/ElemLine";
import PreviewLines from "../elements/lines/ElemLines";
import PreviewGrids from "../elements/grids/ElemGrids";
import PreviewPane from "../elements/pane/ElemPane";
import PreviewFillField from "../elements/fill-field/ElemFillField";
import PreviewGutter from "../elements/gutter/ElemGutter";

export default {
  name: "FreeElementPreview",
  components: {
    PreviewFillField,
    PreviewText,
    PreviewImage,
    PreviewLine,
    PreviewLines,
    PreviewGrids,
    PreviewPane,
    PreviewGutter,
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    elementName() {
      const name = this.data.type.toLowerCase().replace("_", "-");
      return name.includes("line-") ? "line" : name;
    },
    compName() {
      return `preview-${this.elementName}`;
    },
    classes() {
      return ["free-topic-preview", `element-item-${this.elementName}`];
    },
    styles() {
      return {
        left: this.data.x + "px",
        top: this.data.y + "px",
        width: this.data.w + "px",
        height: this.data.h + "px",
        zIndex: this.data.zindex,
      };
    },
  },
  methods: {},
};
</script>
