<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>
      <v-checkbox
        v-for="item in widget.text.options"
        :key="item.value"
        hide-details
        :value="item"
        v-model="widget.value.response"
        :color="input.selectColor"
        :style="{
          margin: '0',
          'border-radius': input.borderRadius + 'px',
          // border: `${input.borderWidth}px ${input.borderType} ${input.borderColor}`,
          fontFamily: input.fontFamily,
          fontSize: input.fontSize + 'px',
          marginBottom: input.spacing + 'px',
          padding: `${input.borderPadding.top}px ${input.borderPadding.right}px ${input.borderPadding.bottom}px ${input.borderPadding.left}px`,

          borderRadius: input.borderRadius + 'px',
          backgroundColor: input.backgroundColor,
          outlineColor: input.borderActive,
        }"
      >
        <template v-slot:label>
          <span
            :style="{ color: input.textColor, fontWeight: input.fontWeight }"
            >{{ item.text }}</span
          >
        </template>
      </v-checkbox>
    </div>
  </div>
</template>

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

<style lang="scss"></style>
