<template>
  <button 
    v-bind:class="[componentClass, {'is-active': isActive }]" 
    :title="getTitle" 
    v-on:click="setValue">
    {{getLabel}}
  </button>
</template>

<script>
import base from './c-base'
const props = {
  dataFieldIdent: {
    type: String,
    default: null
  },
  dataFieldIdent4Label: {
    type: String,
    default: null
  },
  dataFieldIdent4Title: {
    type: String,
    default: null
  },
  label: {
    type: String,
    default: null
  },
  dataFieldValueToSet: {
    type: String,
    default: null
  },
  dataFieldValueToUnSet: {
    type: String,
    default: null
  }
}

export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-btnsv'
    }
  },
  props,
  computed: {
    getLabel: function () {
      return this.label || this.getDataFieldValue(this.dataFieldIdent4Label)
    },
    getTitle: function () {
      return this.getDataFieldValue(this.dataFieldIdent4Title)
    },
    isActive: function () {
      return this.dataFieldValueToSet === this.dataFieldValue ? true : false
    }
  },
  methods: {
    setValue: function () {
      if (this.isActive) {
        if (this.dataFieldValueToUnSet) {
          this.setDataFieldValue(
            this.dataFieldIdent, 
            this.dataFieldValueToUnSet
          )
        }
      } else {
        this.setDataFieldValue(
          this.dataFieldIdent, 
          this.dataFieldValueToSet
        )
      }
    }
  }
}</script>
