<template>
  <div
    :class="page.checked ? 'checked' : 'unchecked'"
    @pointerdown="onHover"
    @pointerenter="onHover"
    @click="click"
  >
    {{ props.interval }}
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";

const props = defineProps<{
  interval: string;
  add: Function;
  remove: Function;
  checked?: boolean;
}>();

const page = reactive<{
  checked: boolean;
}>({
  checked: false,
});

onMounted(() => {
  if (props.checked) {
    change();
  }
});

function onHover(payload: PointerEvent) {
  if (payload.buttons && payload.pointerType !== "touch") {
    change();
  }
}

function click(payload: MouseEvent) {
  const pointerPayload = payload as PointerEvent;
  if (pointerPayload.pointerType === "mouse") {
    return;
  }
  change();
}

function change() {
  page.checked = !page.checked;
  if (page.checked) {
    props.add(props.interval);
  } else {
    props.remove(props.interval);
  }
}
</script>
<style scoped>
.checked {
  background-color: #bae7ff;
  user-select: none;
}
.unchecked {
  background-color: white;
  user-select: none;
}
</style>
