<template>
  <v-app>
    <v-main>
      <v-container max-width="1000">
        <v-sheet :color="panelColor" class="pa-12">
          <v-row justify="center">
            <v-col
              v-for="(_, n) in 6"
              :key="n"
              class="pa-2"
              cols="auto"
            >
              <v-card
                :class="['d-flex justify-center align-center', `elevation-${n}`]"
                :color="cardColor"
                height="120"
                rounded="xl"
                theme="light"
                width="120"
              >
                <div>{{ n }}</div>
              </v-card>
            </v-col>
          </v-row>
          <v-row v-for="(_, b) in 5" :key="b" justify="center">
            <v-col
              v-for="(_, n) in 6"
              :key="n"
              class="pa-2"
              cols="auto"
              style="width: calc(1px * (120 + 4 * 2 * 2))"
            >
              <v-hover v-slot="{ props: hoverProps, isHovering }">
                <v-card
                  v-if="n > b"
                  v-bind="hoverProps"
                  :class="['d-flex justify-center align-center', `elevation-${isHovering ? n : b}`]"
                  :color="cardColor"
                  height="120"
                  rounded="xl"
                  theme="light"
                  width="120"
                >
                  <div>{{ b }} » {{ n }}</div>
                </v-card>
              </v-hover>
            </v-col>
          </v-row>
        </v-sheet>
      </v-container>
    </v-main>
    <v-fab
      :color="panelColor"
      location="top end"
      prepend-icon="$color"
      rounded="pill"
      app
    >
      Panel color
      <v-icon />
      <v-menu activator="parent">
        <v-color-picker v-model="panelColor" />
      </v-menu>
    </v-fab>
    <v-fab
      :color="cardColor"
      location="top end"
      prepend-icon="$color"
      rounded="pill"
      style="margin-top: 45px"
      app
    >
      Card color
      <v-menu activator="parent">
        <v-color-picker v-model="cardColor" />
      </v-menu>
    </v-fab>
    <v-fab
      :color="shadowColor"
      location="top end"
      prepend-icon="$color"
      rounded="pill"
      style="margin-top: 90px"
      app
    >
      Shadow color
      <v-menu activator="parent">
        <v-color-picker v-model="shadowColor" />
      </v-menu>
    </v-fab>
  </v-app>
</template>

<script setup lang="ts">
  import { shallowRef, watch } from 'vue'
  import { useTheme } from 'vuetify'
  const panelColor = shallowRef('#fdfbfe')
  const cardColor = shallowRef('#e1dff8')
  const shadowColor = shallowRef('#000')

  const { current } = useTheme()
  watch(shadowColor, v => {
    current.value.variables['theme-shadow'] = [
      parseInt(v.substring(1, 3), 16),
      parseInt(v.substring(3, 5), 16),
      parseInt(v.substring(5, 7), 16),
    ].join(',')
  })
</script>