/* eslint-disable @typescript-eslint/no-non-null-assertion */
import React from "react"
import cls from "classnames"

import loadingImg from "@/assets/images/loading.gif"

import * as styles from "./index.module.scss"
import { useState } from "react"
import { useEffect } from "react"
import { useRef } from "react"

type ILoading = {
  isLoading: boolean
}

type IProps = React.PropsWithChildren<ILoading>
const defaultTop = 132
function Loading({ isLoading, children }: IProps) {
  const [top, setTop] = useState(132)
  const parentRef = useRef<HTMLTableSectionElement>(null)
  useEffect(() => {
    const height = parentRef.current!.clientHeight
    if (height <= defaultTop) {
      setTop(0)
    }
  }, [isLoading])
  return (
    <section ref={parentRef} className={styles.loadingContainer}>
      <div className={cls(isLoading ? styles.show : "", styles.loadingMask)}>
        <div
          className={cls(isLoading ? styles.show : "", styles.loadingComp)}
          style={{ top: `${top}px` }}
        >
          <img src={loadingImg} />
        </div>
      </div>
      {children}
    </section>
  )
}

export default Loading