<template>
  <div class="flex flex-wrap justify-center">
    <div class="bg-page-dark-bg text-white">
      <div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
        <div class="mt-8 flex flex-wrap justify-center">
          <box :compilation="compilation" :position="currentPosition" :size="size" />
          <div class="devtool  absolute right-4 text-white bg-black rounded-2xl px-4 py-2">
            <button @click="currentPosition = poser">poser</button>
            <button @click="currentPosition = face">face</button>
            <button @click="currentPosition = dos">dos</button>
            <div class="w-full block">
              <input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color1">
              <input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color2">
              <div class="block w-full h-32" :style="{
                background: `linear-gradient(to top, ${compilation.color1}, ${compilation.color2})`
              }">
              </div>
              <label class="block">
                size: {{ size }}
                <input v-model.number="size" type="range" step="1" min="1" max="14">
              </label>
            </div>
            <div>
              <label class="block">
                X: {{ currentPosition.x }}
                <input v-model.number="currentPosition.x" type="range" step="1" min="-180" max="180">
              </label>
              <label class="block">
                Y: {{ currentPosition.y }}
                <input v-model.number="currentPosition.y" type="range" step="1" min="-180" max="180">
              </label>
              <label class="block">
                Z: {{ currentPosition.z }}
                <input v-model.number="currentPosition.z" type="range" step="1" min="-180" max="180">
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { BoxPosition } from '~~/types/types'

const compilation = ref({
  id: 'ES00A',
  name: 'zero',
  duration: 2794,
  description: 'Zero is for manifesto',
  color1: '#ffffff',
  color2: '#48959d',
})

const poser = { x: 76, y: 0, z: 150 }
const face = { x: -20, y: 20, z: 0 }
const dos = { x: -20, y: 200, z: 0 }

const size = ref(6)

const currentPosition: Ref<BoxPosition> = ref(poser)

//from-slate-800 to-zinc-900 
</script>
