<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">
          <molecule-box :compilation="compilation" />
          <div class="devtool  absolute right-4 text-white bg-black rounded-2xl px-4 py-2">
            <!-- <button @click="currentPosition = boxPositions.side">side</button>
            <button @click="currentPosition = boxPositions.front">front</button>
            <button @click="currentPosition = boxPositions.back">back</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>
      <molecule-card :track="track" />
    </div>
  </div>
</template>

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

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

const track = ref<Track>({
  id: 1,
  compilationId: 'ES00A',
  title: 'The grinding wheel',
  artist: {
    id: 0,
    name: 'L\'Efondras',
    url: '',
    coverId: '0024705317',
  },
  start: 0,
  url: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
  coverId: 'a3236746052',
})

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