<template>
  <h1 class="text-white text-2xl w-full font-bold text-center my-24">Frankenstein Test</h1>
  <div class="flex w-full justify-center gap-10">
    <div class="bg-neutral-800 rounded-2xl p-5 h-min">
      <h2 class="text-white font-bold text-lg text-center mb-5">LED Strip Monster</h2> 
      <div class="flex flex-col items-center">
        <color-input disable-alpha v-model="color" />
        <div class="space-x-3">
          <button @click="submitColor" class="px-5 py-2 bg-sky-400 rounded my-5">
            Submit Color
          </button>
          <button class="px-3 py-2 bg-red-700 rounded my-5">
            reset
          </button>
        </div>
      </div>
    </div>
    <div class="bg-neutral-800 rounded-2xl p-5 h-min">
      <h2 class="text-white font-bold text-lg text-center mb-5">LED Strip Hallway</h2> 
      <div class="flex flex-col items-center">
        <input v-model="brightness" type="range" min="0" max="100" class="w-40">
        <label class="text-white mt-2">BRIGHTNESS: {{ brightness }}% </label>
        <button @click="submitBrightness" class="px-5 py-2 bg-sky-400 w-full rounded mt-4">
          Submit
        </button>
      </div>
    </div>
    <div class="bg-neutral-800 rounded-2xl p-5">
      <h2 class="text-white font-bold text-lg text-center mb-5">LED Strip Electrons</h2> 
      <div class="flex flex-col items-center">
        <color-input disable-alpha v-model="pixel.color" />
        <div class="flex items-center mt-4">
          <label class="text-white mr-2">Pixel: </label>
          <input v-model="pixel.pixel" type="number" min="0" max="182" class="w-40">
        </div>
        <button @click="submitPixel" class="px-5 py-2 bg-sky-400 w-full rounded my-5">
          Submit Color
        </button>
        <button @click="useLedTest(pixel.color.r, pixel.color.g, pixel.color.b)" class="px-5 py-2 bg-sky-400 w-full rounded mb-5">
          Test
        </button>
        <button @click="resetStrip" class="px-5 py-2 bg-red-700 w-full rounded">
          Turn Off
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { useSerial } from "../composables/useSerial"
import { useLedTest } from "../composables/useAnimations"

const color = ref({ r: 0, g: 128, b: 255, a: 1});
const brightness = ref(100);
const pixel = ref({ color: { r: 64, g: 255, b: 255, a: 1 }, pixel: 0 });

const submitColor = () => {
  useSerial("SET_STRIP_COLOR:" + `${color.value.r},${color.value.g},${color.value.b}`);
}

const submitBrightness = () => {
  useSerial("SET_LIGHT:" + brightness.value * 2.55);
}

const submitPixel = () => {
  useSerial("SET_LED:" + `${pixel.value.pixel},${pixel.value.color.r},${pixel.value.color.g},${pixel.value.color.b}`);
}

const resetStrip = () => {
  useSerial("SET_LED_OFF");
}
</script>

<style>
.color-input.user .box {
    /* make clickable box a 100x100 circle */
    width: 100px;
    border-radius: 10px;
}
</style>
