<template>
  <base-button type="invisible" :disabled="disabled" @click="onInput">
    <base-icon value="check-square" v-if="value !== false" />
    <base-icon value="square" v-if="value === false" />
  </base-button>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

import BaseButton from '../button/BaseButton.vue'
import BaseIcon from '../icon/BaseIcon.vue'
import InputEvent from '../../core/events/InputEvent'

@Component({
  name: 'base-checkbox',
  components: {
    BaseIcon,
    BaseButton
  }
})
export default class BaseCheckInput extends Vue {
  @Prop({ default: false }) value!: boolean
  @Prop({ default: false }) disabled!: boolean

  onInput () {
    const event = new InputEvent<boolean>()
    event.value = !this.value
    this.$emit('input', event)
  }
}
</script>

<style lang="scss" scoped>
@import "../../core/base/bulma.scss";
@import "bulma/sass/form/shared.sass";
@import "bulma/sass/form/checkbox-radio.sass";
</style>
