<script setup lang="tsx">
/** @jsxImportSource vue */
import { ref, onMounted, onUnmounted, defineComponent, PropType, CSSProperties } from 'vue'
import {
  animate,
  clamp,
  motion,
  MotionValue,
  useDomRef,
  useMotionValue,
  useMotionValueEvent,
  useSpring,
  useTransform,
} from 'motion-v'
import { Archive, Clock9, Flag, MailOpen } from 'lucide-vue-next'

const ITEM_HEIGHT = 80
const ITEM_MAX_WIDTH = 384

const SPRING_OPTIONS = {
  stiffness: 900,
  damping: 80
}

const isSwiping = ref(false)

// Refs for swipe logic and measurements
const swipeItemRef = useDomRef()
const swipeItemWidth = ref(0)
const swipeStartX = ref(0)
const swipeStartOffset = ref(0)
const fullSwipeSnapPosition = ref<'left' | 'right' | null>(null)

/*
  * Swipe motion values
  *
  * Swipe amount:
  *    px value of the swipe amount. 0 is the center of the swipe item, swiping left results in negative values, swiping right results in positive values.
  *
  * Swipe amount spring:
  *    spring value of the swipe amount
  *
  * Swipe progress:
  *    percentage value of the swipe progress. -1 is full swipe left, 1 is full swipe right, 0 is the center.
  */
const swipeAmount = useMotionValue(0)
const swipeAmountSpring = useSpring(swipeAmount, SPRING_OPTIONS)
const swipeProgress = useTransform(swipeAmount, (value) => {
  const itemWidth = swipeItemWidth.value

  if (!itemWidth) return 0

  return value / itemWidth
})

/*
 * Swipe event listeners
 * We attach these 2 event listeners instead of to the swipe item so that they can be detected even when the pointer is outside the swipe item's bounds.
 *
 * Pointer move:
 *    when the pointer is moved, we check the swipe progress and snap to full swipe position if the swipe progress is more than 80% on either side.
 *
 * Pointer up:
 *    when the pointer is released, we check if the swipe is committed or not and snap to the target offset.
 */
const handlePointerMove = (e: PointerEvent) => {
  if (isSwiping.value) {
    const itemWidth = swipeItemWidth.value
    if (!itemWidth) return

    const swipeDelta = e.clientX - swipeStartX.value + swipeStartOffset.value
    const fullSwipeThreshold = itemWidth * 0.8
    const isSwipingBeyondThreshold = Math.abs(swipeDelta) > fullSwipeThreshold
    const isSwipingLeft = swipeDelta < 0

    if (fullSwipeSnapPosition.value) {
      const isSwipingBackToCenter = Math.abs(swipeDelta) < fullSwipeThreshold
      if (isSwipingBackToCenter) {
        fullSwipeSnapPosition.value = null
        swipeAmount.set(swipeDelta)
      } else {
        const snapPosition = fullSwipeSnapPosition.value === 'left' ? -itemWidth : itemWidth
        swipeAmount.set(snapPosition)
      }
      return
    }

    // Not yet snapped to any side
    if (isSwipingBeyondThreshold) {
      const snapDirection = isSwipingLeft ? 'left' : 'right'
      const snapPosition = isSwipingLeft ? -itemWidth : itemWidth
      fullSwipeSnapPosition.value = snapDirection
      swipeAmount.set(snapPosition)
    } else {
      swipeAmount.set(clamp(-itemWidth, itemWidth, swipeDelta))
    }
  }
}

const handlePointerUp = () => {
  if (isSwiping.value) {
    const itemWidth = swipeItemWidth.value
    if (!itemWidth) return

    const currentOffset = swipeAmount.get()
    let targetOffset = 0

    const snapThreshold = itemWidth * 0.25

    if (Math.abs(currentOffset) > snapThreshold) {
      targetOffset = currentOffset > 0 ? itemWidth * 0.5 : itemWidth * -0.5
    }

    const isFullySwiped = fullSwipeSnapPosition.value
    if (isFullySwiped) {
      animate([
        [
          swipeContainerRef.value!,
          {
            scaleY: 1.05,
            scaleX: 0.95,
            y: -24,
            pointerEvents: "none",
          },
          {
            duration: 0.1,
            ease: "easeOut",
          },
        ],
        [
          swipeContainerRef.value!,
          {
            scaleY: 1,
            scaleX: 1,
            y: 0,
            pointerEvents: "auto",
          },
          {
            duration: 0.6,
            type: "spring",
          },
        ],
      ])
      // Reset swipe amount to 0
      targetOffset = 0
      animate(swipeAmount, targetOffset, {
        duration: 0.5,
        delay: 0.3,
      })
    } else {
      // If swiping is not committed, snap to target offset, which is half the swipe item's width if swiping is more than 25% or 0 if swiping is less than 25%
      swipeAmount.set(targetOffset)
    }

    isSwiping.value = false
    fullSwipeSnapPosition.value = null
  } else {
    // In any case, reset the swipe state and the fullSwipeSnapPosition
    isSwiping.value = false
    fullSwipeSnapPosition.value = null
  }
}

const handleResize = () => {
  const newWidth = swipeItemRef.value?.getBoundingClientRect().width
  if (!newWidth) return

  swipeItemWidth.value = newWidth

  const currentProgress = swipeProgress.get()
  const newOffset = currentProgress * newWidth

  swipeAmount.set(newOffset)
  swipeAmountSpring.set(newOffset)
}

// Lifecycle hooks
onMounted(() => {
  document.addEventListener('pointermove', handlePointerMove)
  document.addEventListener('pointerup', handlePointerUp)

  handleResize()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  document.removeEventListener('pointermove', handlePointerMove)
  document.removeEventListener('pointerup', handlePointerUp)
  window.removeEventListener('resize', handleResize)
})
const swipeContainerRef = ref<HTMLDivElement | null>(null)

const ActionsGroup = defineComponent({
  props: {
    swipeAmount: {
      type: Object as PropType<MotionValue<number>>,
      required: true
    },
    side: {
      type: String as PropType<'left' | 'right'>,
      required: true
    }
  },
  setup(props, { slots }) {
    return () => (
      <motion.div
        style={{
          ...styles.actionsGroup,
          left: props.side === 'right' ? '100%' : undefined,
          right: props.side === 'left' ? '100%' : undefined,
          x: props.swipeAmount
        }}
      >
        {slots.default?.()}
      </motion.div>
    )
  }
})

const Action = defineComponent({
  props: {
    primary: {
      type: Boolean,
      default: false
    },
    swipeProgress: {
      type: Object as PropType<MotionValue<number>>,
      required: true
    },
    side: {
      type: String as PropType<'left' | 'right'>,
      required: true
    },
    bgColor: {
      type: String,
      default: '#0f1115'
    }
  },
  setup(props, { slots }) {
    const actionRef = useDomRef()
    const actionWidth = ref(0)

    const calculateX = (swipeProgress: number) => {
      const width = actionWidth.value

      if (props.primary) {
        const absProgress = Math.abs(swipeProgress)
        if (absProgress >= 0.8) return 0
        return ((swipeProgress * width) / 2) * -1
      }
      return 0
    }

    const x = useSpring(0, SPRING_OPTIONS)
    useMotionValueEvent(props.swipeProgress, 'change', (newProgress) => {
      const updatedX = calculateX(newProgress)
      x.set(updatedX)
    })

    onMounted(() => {
      const updateWidth = () => {
        const width = actionRef.value?.getBoundingClientRect().width
        if (!width) return

        actionWidth.value = width
        const newX = calculateX(props.swipeProgress.get())
        x.jump(newX)
      }

      updateWidth()
      window.addEventListener('resize', updateWidth)
      onUnmounted(() => window.removeEventListener('resize', updateWidth))
    })

    const finalStateOpacity = props.primary ? 1 : 0
    const _contentOpacity = useTransform(
      props.swipeProgress,
      [-1, -0.8, -0.5, -0.25, 0.25, 0.5, 0.8, 1],
      [finalStateOpacity, 1, 1, 0, 0, 1, 1, finalStateOpacity]
    )
    const contentOpacity = useSpring(_contentOpacity, SPRING_OPTIONS)

    const _contentX = useTransform(
      props.swipeProgress,
      [-1, -0.8, -0.5, 0.5, 0.8, 1],
      [0, 16, 0, 0, -16, 0]
    )
    const contentX = useSpring(_contentX, SPRING_OPTIONS)

    const _contentScale = useTransform(
      props.swipeProgress,
      [-1, -0.8, 0, 0.8, 1],
      [1, 0.8, 1, 0.8, 1]
    )
    const contentScale = useSpring(_contentScale, SPRING_OPTIONS)

    return () => (
      <motion.div
        ref={actionRef}
        style={{
          ...styles.action.fullWidthContainer,
          justifyContent: props.side === 'right' ? 'flex-start' : 'flex-end',
          x: x,
          backgroundColor: props.bgColor
        }}
      >
        <motion.div style={styles.action.centerer}>
          <motion.span style={{
            ...styles.action.animatedWrapper,
            x: contentX,
            opacity: contentOpacity,
            scale: contentScale,
            transformOrigin: props.side === 'right' ? 'right' : 'left'
          }}>
            {slots.default?.()}
          </motion.span>
        </motion.div>
      </motion.div>
    )
  }
})

const ActionContent = defineComponent({
  props: {
    label: {
      type: String,
      required: true
    },
  },
  setup(props, { slots }) {
    return () => (
      <button style={styles.actionContent}>
        {slots.icon?.()}
        {props.label}
      </button>
    )
  }
})

const SwipeItemContent = defineComponent({
  props: {
    swipeProgress: {
      type: Object as PropType<MotionValue<number>>,
      required: true
    }
  },
  setup(props) {
    const _opacity = useTransform(props.swipeProgress, [-0.5, 0, 0.5], [0, 1, 0])
    const opacity = useSpring(_opacity, SPRING_OPTIONS)

    const _x = useTransform(props.swipeProgress, [-0.5, 0, 0.5], [40, 0, -40])
    const x = useSpring(_x, SPRING_OPTIONS)

    return () => (
      <motion.div style={{
        ...styles.swipeItemContent,
        opacity,
        x
      }}>
        Swipe left or right to reveal actions
      </motion.div>
    )
  }
})

/**
 * ==============   Styles   ================
 */
 type Styles = {
    [K: string]: CSSProperties | Styles
}
const styles = {
    outerContainer: {
        padding: "16px",
        cursor: "default",
    },
    swipeContainer: {
        position: "relative",
        height: ITEM_HEIGHT + 'px',
        width: "80dvw",
        maxWidth: ITEM_MAX_WIDTH + 'px',
        overflow: "hidden",
        backgroundColor: "black",
        borderRadius: "12px",
        border: "1px solid #1d2628",
        zIndex: 0,
        touchAction: "none",
    },
    swipeItem: {
        position: "absolute",
        inset: 0,
        backgroundColor: "#0b1011",
        zIndex: 10,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
    },
    actionsGroup: {
        position: "absolute",
        height: "100%",
        width: "100%",
        userSelect: "none",
        WebkitUserSelect: "none",
        display: "flex",
    },
    action: {
        fullWidthContainer: {
            position: "absolute",
            inset: 0,
            display: "flex",
        },
        centerer: {
            height: "100%",
            width: "25%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
        },
        animatedWrapper: {
            fontSize: '12px',
        },
    },
    actionContent: {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: '4px',
        flexDirection: "column",
        color: "var(--text)",
    },
    swipeItemContent: {
        backgroundColor: "transparent",
        userSelect: "none",
        WebkitUserSelect: "none",
        fontSize: '14px',
        color: "var(--feint-text)",
        textAlign: "center",
        lineHeight: 1.5,
    },
} as const satisfies Styles
</script>

<template>
  <div :style="styles.outerContainer">
    <div 
    ref="swipeContainerRef" 
    :style="styles.swipeContainer"
     @pointerdown="(e) => {
      isSwiping = true
      swipeStartX = e.clientX
      swipeStartOffset = swipeAmount.get()
    }">
      <motion.div 
      ref="swipeItemRef"  
      :style="{
        ...styles.swipeItem,
        x: swipeAmountSpring
      }">
        <SwipeItemContent :swipe-progress="swipeProgress" />
      </motion.div>

      <!-- Actions groups -->
      <ActionsGroup side="left" :swipe-amount="swipeAmountSpring">
        <Action :swipe-progress='swipeProgress' side='left' bg-color='#dd00ee'>
          <ActionContent :icon='Clock9' label='Action 2'>
            <template #icon>
              <Clock9 />
            </template>
          </ActionContent>
        </Action>
        <Action primary :swipe-progress='swipeProgress' side='left' bg-color='#ff0088'>
          <ActionContent label='Action 1'>
            <template #icon>
              <MailOpen />
            </template>
          </ActionContent>
        </Action>
      </ActionsGroup>

      <ActionsGroup side="right" :swipe-amount="swipeAmountSpring">
        <Action :swipe-progress='swipeProgress' side='right' bg-color='#0d63f8'>
          <ActionContent label='Action 4'>
            <template #icon>
              <Flag />
            </template>
          </ActionContent>
        </Action>
        <Action primary :swipe-progress='swipeProgress' side='right' bg-color='#9911ff'>
          <ActionContent label='Action 3'>
            <template #icon>
              <Archive />
            </template>
          </ActionContent>
        </Action>
      </ActionsGroup>
    </div>
  </div>
</template>