import * as React from "react"
import styled, { injectGlobal } from "styled-components"
import getConfig from "jamplay-common/remote-config"

const { publicRuntimeConfig } = getConfig()

// Animate style
// original from animate.css
// https://github.com/daneden/animate.css
// tslint:disable-next-line:no-unused-expression
injectGlobal`
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  animation-name: pulse;
}

`

const CenterImage = styled.img`
  width: 120px;
  animation-iteration-count: infinite;
`
// const LoopAnimated = styled.div`
//   animation-iteration-count: infinite;
// `

export const LoadingIcon = () => (
  <div style={{ overflow: "hidden", width: 250, position: "relative" }}>
    <CenterImage
      style={{ width: 120 }}
      src={`${
        publicRuntimeConfig.staticFolder
      }/static/images/logo-orange@2x.png`}
    />
    <div className="loader">Loading...</div>
  </div>
)

const LoadingContainer = styled.div`
  overflow: visible;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`
export const Loading = ({ style, className }) => (
  <div
    className={`loader ${className || ""}`}
    style={{ width: 50, height: 50, ...style }}
  />
)
export const LoadingWithLogo = () => (
  <LoadingContainer className={""}>
    <CenterImage
      className={"pulse animated"}
      style={{ width: 120 }}
      src={`${
        publicRuntimeConfig.staticFolder
      }/static/images/logo-orange@2x.png`}
    />
  </LoadingContainer>
)
const DimContainer = styled.div`
  opacity: 0;
  pointer-events: none;
  position: fixed;
  background: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999999;

  transition: 0.22222s linear all;
  transform-origin: center center;
  transform: scale(1.2);
  &.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
  }
`
const LoadingDim = ({ visible, style }: { visible?: boolean; style?: any }) => (
  <DimContainer style={style} className={visible ? "visible" : ""}>
    <LoadingWithLogo />
    {visible ? null : <div id="loaded" />}
  </DimContainer>
)
export default LoadingDim