<template>
  <div>
    <v-text-field
      v-model="widgetData.text.heading"
      label="Heading"
      hide-details="auto"
      dense
      outlined
    ></v-text-field>
    <p class="p-h ma-0 pt-2">Style</p>
    <v-radio-group
      v-model="widgetData.style.heading.defaultStyle"
      row
      dense
      hide-details
      class="ma-0 pb-3"
    >
      <v-radio label="Default" :value="true"></v-radio>
      <v-radio label="Custom" :value="false"></v-radio>
    </v-radio-group>

    <v-expansion-panels
      v-if="!widgetData.style.heading.defaultStyle"
      multiple
      class="pb-4"
    >
      <v-expansion-panel>
        <v-expansion-panel-header
          >Custom Heading Style</v-expansion-panel-header
        >
        <v-expansion-panel-content>
          <text-heading-style :data="widgetData.style.heading" />
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>

    <v-divider class="pb-3" />

    <v-text-field
      v-model="widgetData.text.subHeading"
      label="Sub-heading"
      hide-details="auto"
      dense
      outlined
      class="pt-4"
    ></v-text-field>
    <p class="p-h ma-0 pt-2">Style</p>
    <v-radio-group
      v-model="widgetData.style.subHeading.defaultStyle"
      row
      dense
      hide-details
      class="ma-0 pb-3"
    >
      <v-radio label="Default" :value="true"></v-radio>
      <v-radio label="Custom" :value="false"></v-radio>
    </v-radio-group>

    <v-expansion-panels
      v-if="!widgetData.style.subHeading.defaultStyle"
      multiple
      class="pb-4"
    >
      <v-expansion-panel>
        <v-expansion-panel-header
          >Custom Sub-heading Style</v-expansion-panel-header
        >
        <v-expansion-panel-content>
          <text-heading-style :data="widgetData.style.subHeading" />
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>
<script>
import ColorSelector from "@/components/properties/components/ColorSelector";
import TextHeadingStyle from "@/components/properties/components/TextHeadingStyle";

export default {
  name: "TextHeading",
  components: { TextHeadingStyle, ColorSelector },
  props: {
    widgetData: Object,
  },
};
</script>
