<template>
  <div>
    <v-container>
      <v-row justify="space-between">
        <p class="p-h ma-0">{{ fieldValues.name }}</p>
        <v-checkbox
          class="pa-0 ma-0"
          v-model="isToggled"
          @click="toggle()"
        ></v-checkbox>
      </v-row>
    </v-container>
    <div v-if="!isToggled">
      <div>
        <div>
          <p class="p-h ma-0">All Sides</p>
        </div>
        <InputButton
          v-on:leftButton="minusByOne('all')"
          v-on:rightButton="addByOne('all')"
          v-on:onInput="onInput($event, 'all')"
          :value="allSides[fieldValues.top]"
        />
      </div>
    </div>
    <v-container v-else>
      <v-row>
        <div class="pr-10 pb-2">
          <span class="p-h ma-0">Top</span>
          <InputButton
            v-on:leftButton="minusByOne('top')"
            v-on:rightButton="addByOne('top')"
            v-on:onInput="allSides[fieldValues.top] = $event"
            :value="allSides[fieldValues.top]"
          />
        </div>
        <div>
          <span class="p-h ma-0">Right</span>
          <InputButton
            v-on:leftButton="minusByOne('right')"
            v-on:rightButton="addByOne('right')"
            v-on:onInput="allSides[fieldValues.right] = $event"
            :value="allSides[fieldValues.right]"
          />
        </div>
      </v-row>

      <v-row>
        <div class="pr-10">
          <span class="p-h ma-0">Left</span>
          <InputButton
            v-on:leftButton="minusByOne('left')"
            v-on:rightButton="addByOne('left')"
            v-on:onInput="allSides[fieldValues.left] = $event"
            :value="allSides[fieldValues.left]"
          />
        </div>
        <div>
          <span class="p-h ma-0">Bottom</span>
          <InputButton
            v-on:leftButton="minusByOne('bottom')"
            v-on:rightButton="addByOne('bottom')"
            v-on:onInput="allSides[fieldValues.bottom] = $event"
            :value="allSides[fieldValues.bottom]"
          />
        </div>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import InputButton from "./InputButton";
import PropertiesCard from "@/components/properties/components/PropertiesCard";
export default {
  name: "PaddingOption",
  components: {
    PropertiesCard,
    InputButton,
  },
  props: {
    allSides: Object,
    fieldValues: Object,
  },
  data() {
    return {
      isToggled: false,
      //   value: 0
    };
  },
  created() {
    let t = this.allSides[this.fieldValues.top];
    let b = this.allSides[this.fieldValues.bottom];
    let r = this.allSides[this.fieldValues.right];
    let l = this.allSides[this.fieldValues.left];

    if (t !== b || t !== l || t !== r) {
      this.isToggled = true;
    }
  },
  methods: {
    onInput(value, isAll = "one") {
      if (isAll === "all") {
        this.allSides[this.fieldValues.top] = value;
        this.allSides[this.fieldValues.bottom] = value;
        this.allSides[this.fieldValues.left] = value;
        this.allSides[this.fieldValues.right] = value;
      }
    },
    addByOne(value) {
      if (value === "all") {
        this.allSides[this.fieldValues.top]++;
        this.allSides[this.fieldValues.bottom]++;
        this.allSides[this.fieldValues.right]++;
        this.allSides[this.fieldValues.left]++;
      } else {
        this.allSides[this.fieldValues[value]]++;
      }
    },
    minusByOne(value) {
      if (value === "all") {
        if (this.allSides[this.fieldValues.top] > 0) {
          this.allSides[this.fieldValues.top]--;
          this.allSides[this.fieldValues.bottom]--;
          this.allSides[this.fieldValues.right]--;
          this.allSides[this.fieldValues.left]--;
        }
      } else {
        if (this.allSides[this.fieldValues[value]] > 0) {
          this.allSides[this.fieldValues[value]]--;
        }
      }
    },
    toggle() {
      if (!this.isToggled) {
        this.allSides[this.fieldValues.bottom] =
          this.allSides[this.fieldValues.top];
        this.allSides[this.fieldValues.right] =
          this.allSides[this.fieldValues.top];
        this.allSides[this.fieldValues.left] =
          this.allSides[this.fieldValues.top];
      }
    },
  },
};
</script>
