<template>
  <v-app>
    <v-main>
      <v-container max-width="1200">
        <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}`,
                  { 'elevation-overlay': elevationOverlay },
                ]"
                :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}`,
                    { 'elevation-overlay': elevationOverlay },
                  ]"
                  :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-fab
      :append-icon="elevationOverlay ? '$checkboxOn' : '$checkboxOff'"
      location="top end"
      rounded="pill"
      style="margin-top: 135px"
      app
      @click="elevationOverlay = !elevationOverlay"
    >
      Overlay
    </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 elevationOverlay = shallowRef(false)

  const { global, themes } = useTheme()
  watch(shadowColor, v => {
    themes.value[global.name.value].variables['shadow-color'] = v
  })
</script>