import { useNavigate } from 'react-router-dom'
import { useTranslations } from "@/hooks/translations";
import routes from '@/routes'
import styles from './styles.module.css'
import { useEffect, useState } from 'react'

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

function BreathCircle(): JSX.Element {
  const { translate } = useTranslations()
  const navigate = useNavigate()
  const [text, setText] = useState(translate(''))
  const [counter, setCounter] = useState(0)
  const handleNext = () => navigate(routes.client.breathResult())
  
  
  useEffect(() => {
    Promise.resolve()
      .then(() => {
        setText(translate('breathIn'))
        return sleep(4000)
      })
      .then(() => {
        setText(translate('hold'))
        return sleep(2000)
      })
      .then(() => {
        setText(translate('breathOut'))
        return sleep(4000)
      })
      .then(() => {
        setCounter((prevState) => prevState + 1)
        if (counter === 5) {
          handleNext()
        }
      })
  }, [counter])

  return (
    <div className={styles['outer-circle']}>
      <div className={styles['inner-circle']}>
        {text}
      </div>
    </div>
  )
}

export default BreathCircle