<template>
  <div class="buttons has-addons">
    <label class="button is-fullwidth">
        <input type="checkbox" class="checkbox" v-model="selected">
    </label>
    <PercentInput v-show="selected" v-model.number="mod_value"></PercentInput>
  </div>
</template>

<script>
import PercentInput from './PercentInput.vue'

/*  Selector for a specific item, with an associated price modifier.
    Acts as checkbox on a v-model, except it populates an array with [value, modifier] instead of value alone
*/

export default {
    props: ["id", "value"],
    components: { PercentInput },
    data () {
        return {
            selected: false,
            mod_value: 0,
        };
    },
    computed: {
        modifier () {
            return 1 + this.mod_value / 100;
        }
    },
    watch: {
        selected (newState) {
            let idx = this._findData();
            var updated = this.value;
            if (newState == true && idx == -1) {
                updated.push([this.id, this.modifier]);
            } else if (newState == false && idx != -1 ) {
                updated.splice(idx, 1);
            }
            this.$emit('input', updated);
        },
        mod_value (newState) {
            let idx = this._findData();
            var updated = this.value;
            if (idx != -1) {
                updated.splice(idx, 1, [this.id, this.modifier]);
                this.$emit('input', updated);
            }
        }
    },
    methods: {
        _findData () {
            return this.value.findIndex(([val,mod]) => this.id == val);
        }
    }
  }
</script>
