<template>
    <div class="control" :class="{ 'is-expanded': expanded }">
        <label
            class="b-checkbox checkbox button"
            ref="label"
            :class="[checked ? type : null, size, {
                'is-disabled': disabled,
                'is-focused': isFocused
            }]"
            :disabled="disabledOrUndefined"
            @click="focus"
            @keydown.prevent.enter="($refs.label as HTMLElement).click()"
        >
            <slot />
            <input
                v-model="computedValue"
                type="checkbox"
                ref="input"
                @click.stop
                :disabled="disabledOrUndefined"
                :required="requiredOrUndefined"
                :name="name"
                :value="nativeValue"
                @focus="isFocused = true"
                @blur="isFocused = false"
            >
        </label>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import CheckRadioMixin from '../../utils/CheckRadioMixin'

export default defineComponent({
    name: 'BCheckboxButton',
    mixins: [CheckRadioMixin],
    props: {
        type: {
            type: String,
            default: 'is-primary'
        },
        expanded: Boolean
    },
    data() {
        return {
            isFocused: false
        }
    },
    computed: {
        checked() {
            if (Array.isArray(this.newValue)) {
                return this.newValue.indexOf(this.nativeValue) >= 0
            }
            return this.newValue === this.nativeValue
        }
    }
})
</script>
