import { Override } from "framer"
import { motion } from "framer-motion"
import React, { useState, useEffect } from "react"

const targetWord = "MATRIX FRAMER"
const delayPerLetter = 0.04 // Delay in seconds
const repeatDelay = 5 // Delay in seconds

export function LetterCycle(): Override {
    const [displayWord, setDisplayWord] = useState(() =>
        Array(targetWord.length).fill("")
    )

    useEffect(() => {
        const startAnimation = () => {
            const timeoutIds = []
            for (let i = 0; i < targetWord.length; i++) {
                timeoutIds[i] = setInterval(() => {
                    if (displayWord[i] === targetWord[i]) {
                        clearInterval(timeoutIds[i])
                    } else {
                        setDisplayWord((displayWord) => {
                            const newDisplayWord = [...displayWord]
                            // If it's not a space or special character, generate a random letter
                            newDisplayWord[i] = /^[A-Z]$/i.test(targetWord[i])
                                ? String.fromCharCode(
                                      Math.floor(Math.random() * 26) + 65
                                  )
                                : targetWord[i]
                            return newDisplayWord
                        })
                    }
                }, delayPerLetter * 1000)
            }

            setTimeout(() => {
                for (let i = 0; i < targetWord.length; i++) {
                    clearInterval(timeoutIds[i])
                }
                setDisplayWord(Array.from(targetWord))
            }, delayPerLetter * 1000 * targetWord.length)
        }

        startAnimation()

        const repeatTimeoutId = setInterval(() => {
            setDisplayWord(Array.from(Array(targetWord.length).fill("")))
            startAnimation()
        }, repeatDelay * 1000)

        return () => {
            clearInterval(repeatTimeoutId)
        }
    }, [])

    return {
        text: displayWord.join(""),
    }
}

export function NumberCycle(): Override {
    const [displayWord, setDisplayWord] = useState(() =>
        Array(targetWord.length).fill("0")
    )

    useEffect(() => {
        const startAnimation = () => {
            const timeoutIds = []
            for (let i = 0; i < targetWord.length; i++) {
                timeoutIds[i] = setInterval(() => {
                    if (displayWord[i] === targetWord[i]) {
                        clearInterval(timeoutIds[i])
                    } else {
                        setDisplayWord((displayWord) => {
                            const newDisplayWord = [...displayWord]
                            newDisplayWord[i] = String(
                                Math.floor(Math.random() * 10)
                            )
                            return newDisplayWord
                        })
                    }
                }, delayPerLetter * 1000)
            }

            // After delayPerLetter * targetWord.length seconds, set final word
            setTimeout(() => {
                for (let i = 0; i < targetWord.length; i++) {
                    clearInterval(timeoutIds[i])
                }
                setDisplayWord(Array.from(targetWord))
            }, delayPerLetter * 1000 * targetWord.length)
        }

        // Start the initial animation
        startAnimation()

        // Repeat the animation every repeatDelay seconds
        const repeatTimeoutId = setInterval(() => {
            // Reset display word to start state
            setDisplayWord(Array.from(Array(targetWord.length).fill("0")))
            startAnimation()
        }, repeatDelay * 1000)

        return () => {
            // Clean up the repeat interval on unmount
            clearInterval(repeatTimeoutId)
        }
    }, [])

    return {
        text: displayWord.join(""),
    }
}