import { useEffect, useRef, useState } from "react"
import { useNavigate } from "react-router-dom"
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'
import { useTranslation } from 'react-i18next'
import ProcessFlow from "./ProcessFlow"
import routes from "@/routes"
import styles from './styles.module.css'
import { useSelector } from "react-redux"
import { selectors } from "@/store"

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

function CreateProfilePage(): JSX.Element {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const [progress, setProgress] = useState(0)
  const auraCoordinates = useSelector(selectors.selectAuraCoordinates)
  const progressbarRef = useRef<HTMLDivElement>(null);
  const pageRef = useRef<HTMLDivElement>(null);
  const [auraCoordinatesCounted, setAuraCoordinatesCounted] = useState({
    x: auraCoordinates.X - 125,
    y: auraCoordinates.Y - 125
  })

  useEffect(() => {
    document.body.classList.add('fixed-page');

    return () => {
        document.body.classList.remove('fixed-page');
    };
  })

  useEffect(() => {
    setTimeout(() => {
      setAuraCoordinatesCounted(
        {
          x: (progressbarRef?.current?.offsetLeft || 0) + (pageRef?.current?.parentElement?.parentElement?.offsetLeft || 0),
          y: (progressbarRef?.current?.offsetTop || 0) + 50
        }
      )
    }, 1000);
  }, [progressbarRef])
  
  const processItems = [
    { task: () => sleep(3300).then(() => setProgress(23)), label: t('aura.1.loading') },
    { task: () => sleep(2550).then(() => setProgress(48)), label: t('aura.2.loading') },
    { task: () => sleep(3789).then(() => setProgress(65)), label: t('aura.3.loading') },
    { task: () => sleep(3789).then(() => setProgress(98)), label: t('aura.4.loading') },
  ]
  const handleDone = () => Promise.resolve()
    .then(() => setProgress(100))
    .then(() => sleep(1000))
    .then(() => navigate(routes.client.attention()))

  return (
    <section className={`${styles.page} page`} ref={pageRef}>
      <div className={styles.progressbar} ref={progressbarRef}>
        <div style={{ top: `${auraCoordinatesCounted.y}px`, left: `${auraCoordinatesCounted.x}px` }} className={styles.aura}></div>
        <CircularProgressbar
          value={progress}
          text={`${progress}%`}
          strokeWidth={4}
          styles={buildStyles({
            strokeLinecap: 'butt',
            textSize: '12px',
            trailColor: "#555",
            pathColor: '#fff',
            textColor: '#fff',
            pathTransitionDuration: 1,
          })}
          className={styles['circular-progressbar']}
        />
      </div>
      <ProcessFlow items={processItems} onDone={handleDone} />
    </section>
  )
}

export default CreateProfilePage