<template>
    <div
        :class="{ 'd-flex align-items-center': centered }">
        <button
            aria-label="checkbox"
            class="btn btn-link p-0 flex-shrink-0 align-self-baseline"
            :class="classes"
            @click.stop="checkBox">
            <span :class="{ 'mr-2' : label }">
                <i
                    v-if="indeterminate"
                    aria-hidden="true"
                    :class="`fa-${size}`"
                    alt="indeterminate"
                    class="far fa-minus-square bg-white"/>
                <i
                    v-else-if="value"
                    aria-hidden="true"
                    :class="[`fa-${size}`, 'fa-check-square']"
                    alt="Checked"
                    class="far bg-white"/>
                <i
                    v-else
                    aria-hidden="true"
                    :class="[`fa-${size}`, 'fa-square']"
                    alt="Unchecked"
                    class="far bg-white"/>
            </span>
        </button> {{ label | capitalize }}
    </div>
</template>

<script>
import _ from 'lodash'

export default {
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        size: { // 'lg' or 'sm'
            type: String,
            default: 'lg',
        },
        label: {
            type: String,
            default: '',
        },
        classes: {
            type: String,
            default: '',
        },
        centered: {
            type: Boolean,
            default: true,
        },
        indeterminate: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        checkBox() {
            this.$emit('input', !this.value)
        },
    },
    filters: {
        capitalize(value) {
            let valueClone = _.cloneDeep(value)
            if (!valueClone) return ''
            valueClone = valueClone.toString()
            return valueClone.charAt(0).toUpperCase() + valueClone.slice(1)
        },
    },
}
</script>
