<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://vemessage.com/wp-content/uploads/2019/08/vemessage-logo-light-3.png"
          width="200"
        />
      </div>

      <!--      <v-spacer></v-spacer>-->

      <!--      <v-btn-->
      <!--        href="https://github.com/vuetifyjs/vuetify/releases/latest"-->
      <!--        target="_blank"-->
      <!--        text-->
      <!--      >-->
      <!--        <span class="mr-2">Latest Release</span>-->
      <!--        <v-icon>mdi-open-in-new</v-icon>-->
      <!--      </v-btn>-->
    </v-app-bar>

    <v-main>
      <web-form-editor
        component-height="calc(100vh - 64px)"
        :widget-type="widgetType"
        :form-body="formBody"
      ></web-form-editor>
      <!--      <web-from-renderer></web-from-renderer>-->
    </v-main>
  </v-app>
</template>

<script>
import WebFormEditor from "@/pages/WebFormEditor";
import WebFromRenderer from "@/pages/WebFormRenderer";
export default {
  name: "App",

  components: {
    WebFromRenderer,
    WebFormEditor,
  },

  data: () => ({
    widgetType: [
      {
        type: "groups_widget",
        value: { Ans: "" },
        style: {
          0: "white",
          backgroundcolor: "#FFFFFF00",
          textcolor: "#000",
          headingColor: "#005CB9",
          padding: { top: 10, bottom: 10, right: 10, left: 10 },
        },
        text: {
          qheading: "Category",
          question: "",
          spaceId: "y0M9vkXK",
          Answers: [],
        },
        properties: [
          "color-properties",
          "text-properties",
          "general-properties",
        ],
        component: "groups_widget",
      },
      {
        type: "voice_record_widget",
        value: "",
        style: {
          0: "white",
          backgroundcolor: "#FFFFFF00",
          textcolor: "#000",
          padding: { top: 10, bottom: 10, right: 10, left: 10 },
        },
        properties: [],
        component: "voice_record_widget",
      },
      {
        type: "text_area_widget",
        component: "text_area_widget",
        value: "",
        style: {
          0: "white",
          formBody: {
            borderType: "solid",
            borderColor: "#CCC",
            borderWidth: 1,
            borderActive: "#F6F6F6",
            rows: 5,
            maxRows: 5,
          },
          borderRadius: 5,
          size: "md",
          backgroundcolor: "#FFFFFF00",
          textcolor: "#000",
          padding: { top: 10, bottom: 10, right: 10, left: 10 },
          headingColor: "#005CB9",
          onepadding: {
            paddingTop: 10,
            paddingRight: 10,
            paddingBottom: 10,
            paddingLeft: 10,
          },
        },
        text: {
          heading: "Description",
          subheading: "",
          type: "text",
          InputPlaceholder: "Text Area",
        },
        properties: [
          "color-properties",
          "text-properties",
          "form-design",
          "general-properties",
        ],
      },
      {
        type: "submit_button_widget",
        value: "",
        style: {
          backgroundcolor: "#FFFFFF00",
          textcolor: "#000",
          buttoncolor: "#005CB9",
          buttonTextColor: "#FFF",
          buttonHoverColor: "#FFF",
          ButtonHoverTextColor: "#000",
          ButtonBorderColor: "#005CB9",
          ButtonBorder: 0,
          padding: { top: 10, bottom: 10, right: 10, left: 10 },
        },
        text: { buttonText: "Submit" },
        properties: [
          "color-properties",
          "button-properties",
          "general-properties",
        ],
        component: "submit_button_widget",
      },
    ],
    formBody: {},
  }),
};
</script>
