import LoadingOverlay from "react-loading-overlay-ts"
import styled, { css } from "styled-components"

const DarkBackground = styled.div<{ active: boolean }>`
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  ${(props) =>
    props.active &&
    css`
      display: block; /* show */
    `}
`

const CenterDiv = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
`
const StyledLoader = styled(LoadingOverlay)`
  width: 100%;
  height: 100%;
`
function FullScreenLoading({
  active,
  text,
}: {
  active: boolean
  text: string
}) {
  return (
    <DarkBackground active={active}>
      <CenterDiv>
        <StyledLoader active={true} spinner={true} text={text}></StyledLoader>
      </CenterDiv>
    </DarkBackground>
  )
}

export default FullScreenLoading