<template>
  <label class="eg-checkbox" :class="{ 'eg-checkbox--disabled': disabled }">
    <input
      type="checkbox"
      class="eg-checkbox-input"
      :checked="isChecked"
      :disabled="disabled"
      @change="onChange"
    />
    <span class="eg-checkbox-box"></span>
  </label>
</template>

<script>
export default {
  name: 'EgCheckbox',
  model: { prop: 'value', event: 'input' },
  props: {
    value: { default: false },
    trueValue: { default: true },
    falseValue: { default: false },
    disabled: { type: Boolean, default: false }
  },
  computed: {
    isChecked() {
      return this.value === this.trueValue
    }
  },
  methods: {
    onChange(e) {
      const val = e.target.checked ? this.trueValue : this.falseValue
      this.$emit('input', val)
      this.$emit('change', val)
    }
  }
}
</script>

<style>
.eg-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.eg-checkbox-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.eg-checkbox-box {
  position: relative;
  display: block;
  width: 19px;
  height: 19px;
  box-sizing: border-box;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0 0;
  border: 1.5px solid #c2c8d1;
  border-radius: 4px;
  transition: background-color .12s ease, border-color .12s ease, background-size .12s ease;
}
.eg-checkbox:hover .eg-checkbox-box {
  border-color: #1a73e8;
}
.eg-checkbox-input:checked + .eg-checkbox-box {
  background-color: #1a73e8;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTMuNSA4LjNsMyAzIDYtNi42IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==");
  background-size: 70% 70%;
  border-color: #1a73e8;
}
.eg-checkbox-input:focus-visible + .eg-checkbox-box {
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}
.eg-checkbox--disabled,
.eg-checkbox--disabled .eg-checkbox-input {
  cursor: default;
}
.eg-checkbox-input:disabled + .eg-checkbox-box {
  background-color: #f0f1f3;
  border-color: #dadde2;
}
.eg-checkbox-input:disabled:checked + .eg-checkbox-box {
  background-color: #b9c2ce;
  border-color: #b9c2ce;
}
</style>
