import type { ComponentType } from "react"
import { useEffect, useState } from "react"

const words = [
        "Hi my name is Danny",
        "I'm a senior product designer",
        "I write about design",
        "I'm an entrepreneur",
        "I'm a scuba diver and travel enthusiast",
    ],
    skip_delay = 15,
    speed = 70

export function withTypingEffect(Component): ComponentType {
    return (props) => {
        const [part, setPart] = useState("")
        const [i, setI] = useState(0)
        const [offset, setOffset] = useState(0)
        const [forwards, setForwards] = useState(true)
        const [skipCount, setSkipCount] = useState(0)

        useEffect(() => {
            const interval = setInterval(() => {
                if (forwards) {
                    if (offset >= words[i].length) {
                        setSkipCount((skipCount) => skipCount + 1)
                        if (skipCount === skip_delay) {
                            setForwards(false)
                            setSkipCount(0)
                        }
                    }
                } else {
                    if (offset === 0) {
                        setForwards(true)
                        setI((i) => {
                            const nextI = i + 1
                            return nextI >= words.length ? 0 : nextI
                        })
                        setOffset(0)
                    }
                }
                setPart(words[i].substr(0, offset))
                if (skipCount === 0) {
                    setOffset((offset) => (forwards ? offset + 1 : offset - 1))
                }
            }, speed)
            return () => clearInterval(interval)
        }, [i, offset, forwards, skipCount])

        return <Component {...props} text={part} />
    }
}