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

const accordionContent = [
    {
        id: "what-is",
        title: "What is Motion+?",
        content:
            "Motion+ is a one-time fee, lifetime access membership that unlocks the source code for all Motion examples, early access features, premium components, and an exclusive Discord community.",
    },
    {
        id: "lifetime",
        title: `What does "lifetime access" mean?`,
        content: `Just that! No one needs another subscription in their life.\n\nLifetime access means you'll receive all updates to Motion+ as they're released.`,
    },
    {
        id: "team",
        title: "How does the team package work?",
        content:
            "After purchase, you can nominate up to 10 team members to join Motion+.",
    },
]

const value = ref("")
const hasFocus = ref(false)


function onlyKeyboardFocus(callback: () => void) {
    return (e: FocusEvent) => {
        const target = e.target as HTMLElement
        if (e.type === "focus" && target.matches(":focus-visible")) {
            callback()
        }
    }
}

</script>

<template>
  <MotionConfig 
    :transition="{ type: 'spring', bounce: 0.2, visualDuration: 0.4 }"
  >
    <Accordion.Root
      type="single"
      v-model="value"
      class="accordion"
      :collapsible="true"
    >
      <Accordion.Item 
        v-for="item in accordionContent" 
        :key="item.id"
        :value="item.id" 
        class="section"
      >
        <Accordion.Header>
          <Accordion.Trigger as-child>
            <motion.button
              class="trigger"
              @focus="onlyKeyboardFocus(() => hasFocus = true)"
              @blur="() => hasFocus = false"
              :variants="{ pressed: { scale: 0.98 } }"
              whilePress="pressed"
            >
              <span>{{ item.title }}</span>
              <motion.svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                :animate="{ rotate: value === item.id ? 180 : 0 }"
                :style="{ willChange: 'transform' }"
              >
                <path d="m6 9 6 6 6-6" />
              </motion.svg>
              <motion.div
                v-if="hasFocus"
                layoutId="focus-ring"
                class="focus-ring"
                :variants="{
                  pressed: { scale: 0.98 },
                }"
                :transition="{
                  type: 'spring',
                  visualDuration: 0.2,
                  bounce: 0.2,
                }"
              />
            </motion.button>
          </Accordion.Trigger>
        </Accordion.Header>

        <AnimatePresence :initial="false">
          <Accordion.Content v-if="value === item.id" force-mount as-child>
            <motion.div
              class="accordion-content"
              :variants="{
                open: {
                  height: 'auto',
                  maskImage: 'linear-gradient(to bottom, black 100%, transparent 100%)',
                },
                closed: {
                  height: 0,
                  maskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)',
                },
              }"
              initial="closed"
              animate="open"
              exit="closed"
            >
              <motion.div
                :variants="{
                  open: {
                    filter: 'blur(0px)',
                    opacity: 1,
                  },
                  closed: {
                    filter: 'blur(2px)',
                    opacity: 0,
                  },
                }"
              >
                <div class="content-inner">
                  <p v-for="(paragraph, i) in item.content.split('\n\n')" :key="i">
                    {{ paragraph }}
                  </p>
                </div>
              </motion.div>
            </motion.div>
          </Accordion.Content>
        </AnimatePresence>
        <hr />
      </Accordion.Item>
    </Accordion.Root>
  </MotionConfig>
</template>

<style>
.accordion {
  display: flex;
  flex-direction: column;
  background: var(--layer);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 300px;
  max-width: 500px;
  width: 100%;
}

.accordion h3 {
  margin: 0;
  display: flex;
}

.section {
  padding: 20px;
  position: relative;
}

.trigger {
  width: 100%;
  border: none;
  padding: 0;
  color: #f5f5f5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.trigger span,
.trigger svg {
  text-align: left;
  z-index: 1;
  position: relative;
}

.focus-ring {
  position: absolute;
  inset: -10px;
  background: var(--hue-4-transparent);
  border-radius: 5px;
  z-index: 0;
}

hr {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  z-index: 0;
}

@media (max-width: 500px) {
  .accordion { width: 300px; }

  .trigger span {
    font-size: 0.9rem;
  }

  .content-inner {
    font-size: 0.85rem;
  }
}

.section:last-child hr {
  display: none;
}

.accordion-content {
  overflow: hidden;
}

.content-inner {
  padding: 20px 0 0;
  line-height: 1.5;
}

.content-inner p {
  margin: 0;
  padding: 0;
}

.content-inner p + p {
  margin-top: 1em;
}
</style>