import { Box, Center, Typography } from '@tidbcloud/uikit'
import { useTimeout } from '@tidbcloud/uikit/hooks'
import { useState } from 'react'

import TiDBLoadingSVG from 'media/loader/tidb-loading.svg?react'

const TiDBLoading = () => {
  return (
    <Center h="100vh">
      <Box h={200} ta="center">
        <TiDBLoadingSVG height={108} />
        <Typography variant="headline-sm" mt="16px" c="carbon.7">
          Loading...
        </Typography>
      </Box>
    </Center>
  )
}

export type DelayedPageLoaderProps = { delayMs?: number }
/**
 * delayMs – number of milliseconds the timer should wait before the loader is displayed, default: 300.
 */
export const DelayedPageLoader = ({ delayMs = 300 }: DelayedPageLoaderProps) => {
  const [visible, setVisible] = useState(false)
  useTimeout(() => setVisible(true), delayMs, { autoInvoke: true })
  return visible ? <TiDBLoading /> : <></>
}

export const PageLoader = TiDBLoading
export default PageLoader