<script setup lang="tsx">
/** @jsxImportSource vue */
import { Cursor, useCursorState } from 'motion-plus-vue'
import { animate, motion, useMotionValue } from 'motion-v'
import { defineComponent, watch } from 'vue'

const state = useCursorState()
const rotate = useMotionValue(0)

watch(() => state.value?.targetBoundingBox, (hasTarget) => {
  if (!hasTarget) {
    animate(rotate, [rotate.get(), rotate.get() + 360], {
      duration: 3,
      ease: 'linear',
      repeat: Infinity,
    })
  }
  else {
    animate(rotate, Math.round(rotate.get() / 180) * 180, {
      type: 'spring',
      bounce: 0.3,
    })
  }
}, {
  immediate: true,
})

// Button component
const Button = defineComponent({
  setup(props, { slots }) {
    return () => (
      <motion.button
        class="button"
        whilePress={{ scale: 0.9 }}
      >
        {slots.default?.()}
      </motion.button>
    )
  },
})

// Corner component
const Corner = defineComponent({
  props: {
    thickness: {
      type: Number,
      default: 2,
    },
    length: {
      type: Number,
      default: 10,
    },
    top: Number,
    right: Number,
    bottom: Number,
    left: Number,
  },
  setup(props) {
    return () => (
      <>
        <motion.div
          layout
          class="corner"
          style={{
            width: `${props.thickness}px`,
            height: `${props.length}px`,
            top: `${props.top}px`,
            right: `${props.right}px`,
            bottom: `${props.bottom}px`,
            left: `${props.left}px`,
          }}
        />
        <motion.div
          layout
          class="corner"
          style={{
            width: `${props.length}px`,
            height: `${props.thickness}px`,
            top: `${props.top}px`,
            right: `${props.right}px`,
            bottom: `${props.bottom}px`,
            left: `${props.left}px`,
          }}
        />
      </>
    )
  },
})
</script>

<template>
  <div class="h-screen w-screen flex bg-black items-center justify-center">
    <div class="magnetic-container">
      <Button>About</Button>
      <Button>Blog</Button>
      <Button>Contact</Button>
      <Button>Photos</Button>

      <Cursor
        :magnetic="{ morph: false, snap: 0 }"
        :style="{ width: '5px', height: '5px' }"
        class="cursor"
      />
      <Cursor
        :magnetic="{ snap: 0.9 }"
        :style="{ rotate, width: '40px', height: '40px', backgroundColor: 'transparent' }"
        :variants="{
          pressed: { scale: state.targetBoundingBox ? 0.9 : 0.7 },
        }"
        class="reticule"
      >
        <Corner
          :top="0"
          :left="0"
        />
        <Corner
          :top="0"
          :right="0"
        />
        <Corner
          :bottom="0"
          :left="0"
        />
        <Corner
          :bottom="0"
          :right="0"
        />
      </Cursor>
    </div>
  </div>
</template>

<style>
.magnetic-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 30px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 650px) {
  .magnetic-container {
    grid-template-columns: 1fr 200px;
    gap: 10px;
  }
}

.magnetic-container > :nth-child(4) {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.corner {
  background: white;
  position: absolute;
}

.cursor {
  background-color: #f5f5f5;
}

.reticule {
  border-radius: 0;
}

.button {
  background: none;
  padding: 8px;
  width: 140px;
  height: 50px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #fff4;
  border-radius: 0;
  user-select: none;
}
</style>