import React, { useContext } from 'react'
import Lottie from 'react-lottie'
import { translate } from 'cozy-ui/react/I18n'
import { AppContext } from 'components/Contexts/AppContextProvider'
import StyledButton from 'components/CommonKit/Button/StyledButton'

import * as loadingData from 'assets/anims/splash.json'

const loadingOptions = {
  loop: true,
  autoplay: true,
  animationData: loadingData,
  rendererSettings: {
    preserveAspectRatio: 'xMidYMid slice',
  },
}

interface SplashContainerProps {
  t: Function
}

const SplashContainer: React.FC<SplashContainerProps> = ({
  t,
}: SplashContainerProps) => {
  const appContext = useContext(AppContext)

  return (
    <div className="splash-root">
      <div className="splash-content">
        <Lottie
          options={loadingOptions}
          height={300}
          width={300}
          isStopped={appContext.isError}
        />
      </div>
      <div className="splash-footer">
        {appContext.isError && (
          <>
            <div className="splash-footer-error-text text-16-normal">
              {t('LOADING.ERROR_LOADING')}
            </div>
            <StyledButton
              className="splash-footer-button"
              onClick={() => window.location.reload()}
            >
              {t('LOADING.RELOAD')}
            </StyledButton>
          </>
        )}
      </div>
    </div>
  )
}

export default translate()(SplashContainer)