<script setup lang="ts">
import { ref } from 'vue'
import { ContextMenu } from 'reka-ui/namespaced'
import { AnimatePresence, motion } from 'motion-v'

const bookmarksChecked = ref(true)
const urlsChecked = ref(false)
</script>

<template>
  <div class="container">
    <ContextMenu.Root>
      <ContextMenu.Trigger class="trigger">
        <div class="trigger-content">
          Right-click here
        </div>
      </ContextMenu.Trigger>

      <ContextMenu.Portal>
        <AnimatePresence>
          <ContextMenu.Content as-child>
            <motion.div
              class="content"
              :initial="{ opacity: 0, scale: 0.9 }"
              :animate="{ opacity: 1, scale: 1 }"
              :exit="{ opacity: 0, scale: 0.9 }"
            >
              <ContextMenu.Item class="item">
                Back <div class="shortcut">
                  ⌘+[
                </div>
              </ContextMenu.Item>
              <ContextMenu.Item
                class="item"
                disabled
              >
                Forward <div class="shortcut">
                  ⌘+]
                </div>
              </ContextMenu.Item>
              <ContextMenu.Item class="item">
                Reload <div class="shortcut">
                  ⌘+R
                </div>
              </ContextMenu.Item>

              <ContextMenu.Sub>
                <ContextMenu.SubTrigger class="item">
                  More Tools
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                    />
                  </svg>
                </ContextMenu.SubTrigger>
                <ContextMenu.Portal>
                  <AnimatePresence>
                    <ContextMenu.SubContent as-child>
                      <motion.div
                        class="content"
                        :initial="{ opacity: 0, x: -10 }"
                        :animate="{ opacity: 1, x: 0 }"
                        :exit="{ opacity: 0, x: -10 }"
                        :transition="{
                          type: 'spring',
                          stiffness: 400,
                          damping: 20,
                          opacity: { duration: 0.2 },
                        }"
                      >
                        <ContextMenu.Item class="item">
                          Save Page As…
                          <div class="shortcut">
                            ⌘+S
                          </div>
                        </ContextMenu.Item>
                        <ContextMenu.Item class="item">
                          Create Shortcut…
                        </ContextMenu.Item>
                        <ContextMenu.Item class="item">
                          Name Window…
                        </ContextMenu.Item>
                        <ContextMenu.Separator class="separator" />
                        <ContextMenu.Item class="item">
                          Developer Tools
                        </ContextMenu.Item>
                      </motion.div>
                    </ContextMenu.SubContent>
                  </AnimatePresence>
                </ContextMenu.Portal>
              </ContextMenu.Sub>

              <ContextMenu.Separator class="separator" />

              <ContextMenu.CheckboxItem
                class="item"
                v-model="bookmarksChecked"
              >
                <ContextMenu.ItemIndicator>
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                    />
                  </svg>
                </ContextMenu.ItemIndicator>
                Show Bookmarks
                <div class="shortcut">
                  ⌘+B
                </div>
              </ContextMenu.CheckboxItem>
              <ContextMenu.CheckboxItem
                class="item"
                v-model="urlsChecked"
              >
                <ContextMenu.ItemIndicator>
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                    />
                  </svg>
                </ContextMenu.ItemIndicator>
                Show Full URLs
              </ContextMenu.CheckboxItem>
            </motion.div>
          </ContextMenu.Content>
        </AnimatePresence>
      </ContextMenu.Portal>
    </ContextMenu.Root>
  </div>
</template>

<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background-color: var(--layer);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.trigger {
  display: block;
  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  background-color: var(--layer-transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  color: #f5f5f5;
  border-radius: 6px;
  padding: 4px;
  transform-origin: var(--radix-context-menu-content-transform-origin);
}

.item {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.item[data-disabled] {
  color: var(--feint-text);
  cursor: not-allowed;
}

.item[data-highlighted] {
  background-color: #ff0088;
  outline: none;
}

.item[data-highlighted] .shortcut {
  color: #f5f5f5;
}

.item.danger {
  color: #ff0088;
}

.shortcut {
  color: var(--feint-text);
  font-size: 12px;
  margin-left: 16px;
}

.separator {
  height: 1px;
  background-color: #333;
  margin: 4px 0;
}
</style>