<template>
  <div>
    <base-form
      v-if="property.type === PropertyType.Input"
      :label="property.label"
      :value="(property.value as string)"
      @changeValue="changeValue"
      :isDisabled="isDisabled"
    />
    <date-form
      v-else-if="property.type === PropertyType.Date"
      :label="property.label"
      :value="(property.value as string)"
      @changeValue="changeValue"
      :isDisabled="isDisabled"
    />
    <select-form
      v-else-if="property.type === PropertyType.Select"
      :label="property.label"
      @changeValue="changeValue"
      :property="property"
      :isDisabled="isDisabled"
      :setPropertyOptions="setPropertyOptions"
    />
    <image-form
      v-else-if="property.type === PropertyType.Image"
      :property="property"
      :disable="isDisabled"
      :setPropertyValue="setPropertyValue"
    />
    <editor-form
      v-if="property.type === PropertyType.Editor"
      :property="property"
      :label="property.label"
      :setPropertyValue="setPropertyValue"
    />
    <p-d-f-forms
      v-else-if="property.type === PropertyType.File"
      :property="property"
      :setPropertyValue="setPropertyValue"
      :disable="isDisabled"
    />
    <video-forms
      v-else-if="property.type === PropertyType.Video"
      :property="property"
      :setPropertyValue="setPropertyValue"
    />
    <AudioForm
      v-else-if="property.type === PropertyType.Audio"
      :property="property"
      :setPropertyValue="setPropertyValue"
    />
    <TextAreaForm
      v-else-if="property.type === PropertyType.TextArea"
      :property="property"
      :setPropertyValue="setPropertyValue"
    />
    <link-form
      v-else-if="property.type === PropertyType.Link"
      :property="property"
      :label="property.label"
      :value="(property.value as string)"
      @changeValue="changeValue"
      :isDisabled="isDisabled"
    ></link-form>
    <json-form
      v-else-if="property.type === PropertyType.JSON"
      :property="property"
      :setPropertyValue="setPropertyValue"
    />
    <image-url-form
      v-else-if="property.type === PropertyType.ImageUrl"
      :property="property"
      :setPropertyValue="setPropertyValue"
    />
    <text-array-form
      v-if="property.type === PropertyType.TextArray"
      :property="property"
      :setPropertyValue="setPropertyValue"
    />
  </div>
</template>

<script lang="ts" setup>
import { Property } from "./types2";
import { PropertyType } from "./types";
import ImageForm from "./form/ImageForm.vue";
import SelectForm from "./form/SelectForm.vue";
import PDFForms from "./form/PDFForms.vue";
import VideoForms from "./form/VideoForm.vue";
import BaseForm from "./form/BaseForm.vue";
import DateForm from "./form/DateForm.vue";
import EditorForm from "./form/EditorForm.vue";
import AudioForm from "./form/AudioForm.vue";
import TextAreaForm from "./form/TextAreaForm.vue";
import LinkForm from "./form/LinkForm.vue";
import JsonForm from "./form/JSONForm.vue";
import ImageUrlForm from "./form/ImageUrlForm.vue";
import TextArrayForm from "./form/TextArrayForm.vue";
import { nextTick } from "vue";

const props = withDefaults(
  defineProps<{
    property: Property;
    isDisabled?: boolean;
    setProperty: (v: any) => void;
  }>(),
  {
    isDisabled: false,
  }
);

const setPropertyValue = (v: string | string[]) => {
  const p = props.property;
  p.value = v;
  props.setProperty(p);
};

const setPropertyOptions = (v: string[]) => {
  const p = props.property;
  p.options = v;
  props.setProperty(p);
};

const changeValue = (newData: any, key: string) => {
  nextTick(() => {
    const property: any = props.property;
    property[key] = newData;
    props.setProperty(property);
  });
};
</script>

<style scoped></style>
