<template>
  <div>
    <v-bottom-sheet v-model="showMenu" inset>
      <template #activator="{ props }">
        <div class="tw:text-center">
          <v-btn v-bind="props" icon="mdi-dev-to" color="#ffc400" />
        </div>
      </template>
      <v-list
        v-model:selected="dropCollections"
        v-model:opened="openGroups"
        select-strategy="leaf"
      >
        <v-list-subheader>Development mode</v-list-subheader>
        <v-list-item
          :title="toggleDevIndicatorMessage"
          prepend-icon="mdi-border-outside"
          @click="toggleShowDevIndicator"
        />
        <v-list-group value="Users">
          <template v-slot:activator="{ props }">
            <v-list-item v-bind="props" prepend-icon="mdi-delete-sweep">
              Drop Collections
            </v-list-item>
          </template>
          <div class="tw:relative">
            <v-btn
              v-if="dropCollections.length"
              color="error"
              class="tw:absolute! tw:top-5! tw:right-5! tw:z-9999!"
              @click="showConfirmation = true"
              icon="mdi-delete-circle-outline"
            >
            </v-btn>

            <v-list-item
              v-for="collection in allCollections"
              :key="collection.name"
              :title="collection.name"
              :subtitle="`Item Count: ${collection.count}`"
              :value="collection.name"
              :color="getColor(collection.name)"
              :base-color="getColor(collection.name)"
            >
              <template v-slot:prepend="{ isSelected, select }">
                <v-list-item-action start>
                  <v-checkbox-btn
                    :model-value="isSelected"
                    @update:model-value="select"
                  ></v-checkbox-btn>
                </v-list-item-action>
              </template>
              <template v-slot:append>
                <v-list-item-action
                  v-if="isCoreCollection(collection.name)"
                  end
                >
                  <v-icon color="warning">mdi-alert</v-icon>
                </v-list-item-action>
              </template>
            </v-list-item>
          </div>
        </v-list-group>
      </v-list>
    </v-bottom-sheet>
    <v-dialog v-model="showConfirmation" max-width="400">
      <v-card>
        <v-card-title class="tw:text-lg tw:font-semibold tw:text-red-600">
          Delete Database Collections
        </v-card-title>
        <v-card-text>
          Are you sure you want to delete the selected Collections?
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn @click="showConfirmation = false" variant="text"> Nope </v-btn>
          <v-btn
            @click="handleDropCollections"
            color="error"
            variant="elevated"
          >
            Aigh
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup lang="ts">
import { useLocalStorage } from "@vueuse/core"
import { computed, ref, watch, onMounted } from "vue"
import { $api, $eventbus } from "@racletteCore"
import { useRouter } from "vue-router"

const router = useRouter()
const openGroups = ref([])
const showMenu = ref(false)
const showDevIndicator = useLocalStorage<boolean>("show-dev-indicator", true)
const showConfirmation = ref(false)
const allCollections = ref([])
const toggleShowDevIndicator = () => {
  showDevIndicator.value = !showDevIndicator.value
  showMenu.value = false
}
const dropCollections = ref([])
const toggleDevIndicatorMessage = computed(() => {
  const word = showDevIndicator.value ? "Hide" : "Show"

  return `${word} dev indication borders`
})
watch(showMenu, (value) => {
  if (!value) {
    dropCollections.value = []
  }
})
watch(
  showDevIndicator,
  (value) => {
    if (value) {
      document.body.classList.add("dev-indicator")
    } else {
      document.body.classList.remove("dev-indicator")
    }
  },
  { immediate: true },
)
onMounted(async () => {
  const res = await $api.axios
    .get("/core/admin/collections/all", {})
    .catch((e) => {
      $eventbus.emit("ui/addToSnackbar", {
        message: e.response.data.message,
        color: "error",
      })
      throw e
    })
  const data = res?.data?.data || []
  allCollections.value = data.sort((a, b) => a.name.localeCompare(b.name))
})
const handleDropCollections = async () => {
  if (dropCollections.value.length) {
    const res = await $api.axios
      .delete("/core/admin/collections", {
        data: {
          collections: dropCollections.value,
        },
      })
      .catch((e) => {
        $eventbus.emit("ui/addToSnackbar", {
          message: e.response.data.message,
          color: "error",
        })
        throw e
      })
    router.go()
  }
}
const isCoreCollection = (name) => {
  return name.indexOf("raclette__core") > -1
}
const getColor = (name) => {
  if (isCoreCollection(name)) {
    return "error"
  }
}
</script>

<style lang="scss">
body.dev-indicator {
  &:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    border: 4px solid #ffc400;
    z-index: 9999;
  }
}
</style>
