<template>
  <div>
    <heading
      :ts="formBody.sharedStyle.heading"
      :ls="widget.style.heading"
      :d="widget.style.heading.defaultStyle"
      >{{ widget.text.heading }}
    </heading>
    <heading
      :ts="formBody.sharedStyle.subHeading"
      :ls="widget.style.subHeading"
      :d="widget.style.subHeading.defaultStyle"
      >{{ widget.text.subHeading }}
    </heading>

    <div
      :style="{
        margin: `${input.margin.top}px ${input.margin.right}px ${input.margin.bottom}px ${input.margin.left}px`,
      }"
    >
      <input
        :type="input.type"
        :style="{
          'border-radius': input.borderRadius + 'px',
          border: `${input.borderWidth}px ${input.borderType} ${input.borderColor}`,
          width: '100% !important',
          height: input.borderHeight + 'px',
          fontFamily: input.fontFamily,
          fontSize: input.fontSize + 'px',
          margin: `${input.borderMargin.top}px ${input.borderMargin.right}px ${input.borderMargin.bottom}px ${input.borderMargin.left}px`,
          padding: `${input.borderPadding.top}px ${input.borderPadding.right}px ${input.borderPadding.bottom}px ${input.borderPadding.left}px`,
          fontWeight: input.fontWeight,
          color: input.textColor,
          borderRadius: input.borderRadius + 'px',
          backgroundColor: input.backgroundColor,
          outlineColor: input.borderActive,
        }"
        v-model="widget.value"
        :placeholder="widget.style.input.placeholder"
      />
    </div>
  </div>
</template>

<script>
import Heading from "@/components/widgets/components/heading";
export default {
  name: "TextInputWidget",
  components: { Heading },
  data: function () {
    return {
      input: this.widget.style.input.defaultStyle
        ? this.formBody.sharedStyle.textInput
        : this.widget.style.input,
    };
  },
  watch: {
    "widget.style.input.defaultStyle": function () {
      this.input = this.widget.style.input.defaultStyle
        ? this.formBody.sharedStyle.textInput
        : this.widget.style.input;
    },
  },
  props: {
    formBody: Object,
    widget: Object,
  },
};
</script>
