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

import { Container, Skeleton } from './layout'
import { isDev, isTopWindow } from '../utils/env'

export function SplashScreen() {
  const display = useDisplay()

  switch (display) {
    case 'auth':
      return (
        <Container>
          <Skeleton />
        </Container>
      )

    case 'deny':
      return (
        <Container>
          <p>You need to be on VTEX Admin to access this app</p>
        </Container>
      )
  }
}

/**
 * Hook to control the status to display
 */
function useDisplay() {
  const [display, setDisplay] = useState<'auth' | 'deny'>('auth')

  useEffect(() => {
    if (isTopWindow() && !isDev()) {
      setDisplay('deny')
    }
  }, [])

  return display
}