<template>
  <div>
    <v-select
      :items="fontFamily"
      v-model="data.fontFamily"
      label="Font Family"
      outlined
      dense
    ></v-select>

    <v-text-field
      v-model="data.fontSize"
      label="Font Size"
      hide-details="auto"
      dense
      outlined
    ></v-text-field>
    <v-spacer class="mb-6" />
    <v-select
      :items="fontWeight"
      v-model="data.fontWeight"
      label="Font Weight"
      outlined
      dense
    ></v-select>

    <color-selector
      label="Text Color"
      :color="data.textColor"
      @color="data.textColor = $event"
    />
    <v-spacer class="mb-6" />
    <padding-option
      v-if="data.borderPadding != null"
      :all-sides="data.borderPadding"
      :fieldValues="{
        name: 'borderPadding',
        top: 'top',
        bottom: 'bottom',
        left: 'left',
        right: 'right',
      }"
    />
    <v-spacer class="mb-6" />
    <v-text-field
      v-model="data.borderWidth"
      label="Border Width"
      hide-details="auto"
      dense
      outlined
    ></v-text-field>
    <v-spacer class="mb-6" />
    <color-selector
      label="Select Color"
      :color="data.borderColor"
      @color="data.borderColor = $event"
    />
    <v-spacer class="mb-6" />

    <padding-option
      :all-sides="data.borderPadding"
      :fieldValues="{
        name: 'borderPadding',
        top: 'top',
        bottom: 'bottom',
        left: 'left',
        right: 'right',
      }"
    />
    <v-spacer class="mb-6" />
    <v-text-field
      v-if="data.borderHeight != null"
      v-model="data.borderHeight"
      label="Border Height"
      hide-details="auto"
      dense
      outlined
    ></v-text-field>
    <v-spacer class="mb-6" />
    <v-text-field
      v-model="data.borderRadius"
      label="Border Radius"
      hide-details="auto"
      dense
      outlined
    ></v-text-field>
    <v-spacer class="mb-6" />
    <color-selector
      label="Text Field Background Color"
      :color="data.backgroundColor"
      @color="data.backgroundColor = $event"
    />
    <v-spacer class="mb-6" />
  </div>
</template>

<script>
import ColorSelector from "@/components/properties/components/ColorSelector";
import PaddingOption from "@/components/properties/components/PaddingOption";
export default {
  name: "CheckboxStyle",
  components: { PaddingOption, ColorSelector },
  props: { data: Object },
  data() {
    return {
      fontFamily: [
        {
          value: "Montserrat, sans-serif",
          text: "Montserrat",
        },
        {
          value: "courier-prime, monospace",
          text: "Courier-prime",
        },
        {
          value: "open-sans, sans-serif",
          text: "Open-sans",
        },
      ],
      fontWeight: [
        {
          value: "normal",
          text: "normal",
        },
        {
          value: "bold",
          text: "bold",
        },
        {
          value: "lighter",
          text: "lighter",
        },
      ],
    };
  },
};
</script>

<style scoped></style>
