<template>
  <properties-card title="Button">
    <v-text-field
      v-model="widgetData.text.buttonText"
      label="Button Text"
      hide-details="auto"
      dense
      outlined
      class="mb-4"
    ></v-text-field>
    <p class="p-h ma-0">Button Color</p>
    <v-spacer class="pa-1" />
    <color-selector
      :color="widgetData.style.buttoncolor"
      @color="widgetData.style.buttoncolor = $event"
    />

    <v-spacer class="pa-2" />

    <p class="p-h ma-0">Button Text Color</p>
    <v-spacer class="pa-1" />
    <color-selector
      :color="widgetData.style.buttonTextColor"
      @color="widgetData.style.buttonTextColor = $event"
    />

    <v-spacer class="pa-2" />

    <p class="p-h ma-0">Button Hover Color</p>
    <v-spacer class="pa-1" />
    <color-selector
      :color="widgetData.style.buttonHoverColor"
      @color="widgetData.style.buttonHoverColor = $event"
    />

    <v-spacer class="pa-2" />

    <span class="p-h">border Width</span>
    <InputButton
      v-on:leftButton="
        globalAdd(
          widgetData.style.ButtonBorder > 0
            ? --widgetData.style.ButtonBorder
            : widgetData.style.ButtonBorder
        )
      "
      v-on:rightButton="globalAdd(++widgetData.style.ButtonBorder)"
      v-on:onInput="widgetData.style.ButtonBorder = $event"
      :value="widgetData.style.ButtonBorder"
    />
  </properties-card>
</template>

<script>
import InputButton from "./components/InputButton";
import PropertiesCard from "@/components/properties/components/PropertiesCard";
import ColorSelector from "@/components/properties/components/ColorSelector";
export default {
  props: {
    widgetData: Object,
  },
  components: {
    ColorSelector,
    PropertiesCard,
    InputButton,
  },
  data() {
    return {};
  },
  methods: {
    globalAdd(value) {
      this.widgetData.style.ButtonBorder = value;
    },
  },
};
</script>

<style></style>
