import React, { useEffect, useRef, useState } from 'react'

import styles from './_report-loader.module.scss'
import { c } from '../../translations/LibraryTranslationService'

type ReportLoaderProps = {
  noDelay?: boolean
  noText?: boolean
  customClass?: string
  loadingMessage?: string
}
/**
 * @deprecated Please do not continue to use this loader. UX does not want this used anymore.
 **/
const ReportLoader = ({
  noDelay,
  noText,
  customClass,
  loadingMessage,
}: ReportLoaderProps) => {
  const [loading, setLoading] = useState(true)
  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined)

  useEffect(() => {
    if (noDelay) {
      setLoading(false)
    } else {
      timeoutRef.current = setTimeout(() => {
        setLoading(false)
      }, 500)
    }
    return () => {
      timeoutRef.current && clearTimeout(timeoutRef.current)
    }
  }, [noDelay])

  return (
    <div className={customClass ? customClass : ''}>
      {!loading && (
        <div className={styles.loadingContainer}>
          {!noText && (
            <div className={`${styles.textContainer} animated fadeInDown`}>
              <span className={styles.dark}>
                {`${loadingMessage ? loadingMessage : c('generatingReport')}`}
                &nbsp;&nbsp;
              </span>
              <span className={styles.light}>
                {c('thisMayTakeAFewMoments')}
              </span>
            </div>
          )}
          <div className='animated fadeInUp'>
            <div className={styles.reportLoader}>
              <div className={styles.dots}></div>
              <div className={styles.dots}></div>
              <div className={styles.dots}></div>
              <div className={styles.dots}></div>
              <div className={styles.dots}></div>
              <div className={styles.dots}></div>
              <div className={styles.dots}></div>
              <div className={styles.dots}></div>
              <div className={styles.dots}></div>
              <div className={styles.dots}></div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default ReportLoader