<template>
  <label class="checkbox m-n2 p-2" @click.stop>
    <input class="form-check-input ml-0 p-2" v-model="model" type="checkbox" :id="id">
    <checkbox-blank-circle-outline-icon v-if="circle" class="icon-unchecked" />
    <checkbox-blank-outline-icon v-else class="icon-unchecked" />
    <check-circle-icon v-if="circle" class="icon-checked" />
    <checkbox-marked-icon v-else class="icon-checked" />
  </label>
</template>

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

@Component
export default class Checkbox extends Vue {
  @Prop(Boolean) readonly circle!: boolean;
  @Prop(Boolean) readonly value!: boolean;
  @Prop(String) readonly id!: string;

  get model(): boolean {
    return this.value;
  }

  set model(value: boolean) {
    this.$emit('input', value);
  }
}
</script>

<style lang="scss" scoped>
@import '../../variables';

.checkbox {
  cursor: pointer;

  .icon-checked {
    display: none;

    svg {
      fill: #007bff;
    }
  }

  input {
    display: none;

    &:checked {
      & ~ .icon-checked {
        display: inline-block;
      }

      & ~ .icon-unchecked {
        display: none;
      }
    }
  }
}

</style>
