<template>
  <div class="checkbox-container">
    <label class="checkbox-item" :class="{ disabled: disabled }" @change="setFilter">
      <input
          type="checkbox"
          :checked="isChecked"
          :disabled="disabled"
          v-model="isChecked"
      >
      <span class="checkmark"></span>
      <span class="checkbox-label"><slot></slot></span>
    </label>
  </div>
</template>

<script>
export default{
  emits:["checkbox-changed"],
  props: {
    checked: {
      type: Boolean,
      default: true,
      required: false
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  name: "Checkbox",
  data() {
    return {
      internalChecked: this.checked,
    }
  },
  computed: {
    isChecked: {
      get() {
        return this.internalChecked;
      },
      set(value) {
        if (this.disabled) return; // Prevent changes when disabled
        this.internalChecked = value;
        this.$emit('checkbox-changed', value);
      }
    }
  },
  watch: {
    checked(newVal) {
      this.internalChecked = newVal;
    }
  },
  methods: {
    setFilter(event) {
      if (this.disabled) return; // Prevent action when disabled
      // The computed setter will handle the emit
      this.isChecked = event.target.checked;
    }
  }
}
</script>

<style>

.checkbox-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.checkbox-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.checkbox-item.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.checkbox-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-item.disabled input[type="checkbox"] {
  cursor: not-allowed;
}

.checkmark {
  position: relative;
  height: 2rem;
  width: 2rem;
  background-color: #ffffff;
  border: 0.2rem solid #DCDCDC;
  border-radius: 0.4rem;
  margin-right: 1rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-item:not(.disabled):hover .checkmark {
  background: #EEF4FF;
  border: 0.2rem solid #8DB3FE;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

.checkbox-item.disabled .checkmark {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}

.checkbox-item input:checked ~ .checkmark {
  background-color: #002F54;
  border-color: #002F54;
}

.checkbox-item.disabled input:checked ~ .checkmark {
  background-color: #6b7280;
  border-color: #6b7280;
}

.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  width: 0.6rem;
  height: 1rem;
  border: solid white;
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
  top: 1px;
  left: 5px;
}

.checkbox-item input:checked ~ .checkmark::after {
  display: block;
}

.checkbox-label {
  color: #002F54;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.checkbox-item.disabled .checkbox-label {
  color: #8a8a8a;
}
</style>