<script setup>
import { ref, watch, computed, onMounted } from "vue";
const props = defineProps({
  size: {
    type: Number,
    default: 60,
  },
});
const emit = defineEmits(["size-change"]);

const slider = ref(null);
const innerSize = ref(props.size);

// watch
watch(
  () => innerSize.value,
  (value) => {
    emit("size-change", value);
  }
);

// handlers
function keydownHandler(e) {
  if (e.shiftKey && e.key === "L") {
    if (slider.value) {
      slider.value.classList.toggle("show");
    }
  }
}

// hooks
onMounted(() => {
  document.addEventListener("keydown", keydownHandler);
});
</script>

<template>
  <div ref="slider" class="slider">
    <input type="range" min="0" max="100" v-model="innerSize" />
  </div>
</template>

<style scoped>
.slider {
  height: 5vh;
  width: 20vw;
  border-radius: 88px;
  box-shadow: 0 0 68px 8px rgba(0, 0, 0, 0.3);
  padding: 32px;
  display: grid;
  place-items: center;
  background: #fff;
  position: fixed;
  z-index: 1000;
  bottom: -5vh;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
}

.slider input {
  width: 100%;
  transform: translateY(-7px);
  color: #0b58ff;
  background: #fcc;
}

.slider.show {
  opacity: 1;
  bottom: 64px;
}
</style>
