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

// tslint:disable-next-line:no-unused-expression
injectGlobal`
    .jelly-sprite {
      background-image: url(${getConfig().publicRuntimeConfig.staticFolder || ""}/ui-assets/images/jelly.png);
    }
    @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
      .jelly-sprite {
        background-image: url(${getConfig().publicRuntimeConfig.staticFolder || ""}/ui-assets/images/jelly@2x.png);
        background-size: 320px 320px;
      }
    }
    .sprite-jelly-gold-big {
      width: 58px;
      height: 58px;
      background-position: 0 0;
    }
    .sprite-jelly-gold-medium {
      width: 46px;
      height: 46px;
      background-position: -58px -58px;
    }
    .sprite-jelly-gold-small {
      width: 32px;
      height: 32px;
      background-position: -104px -104px;
    }
    .sprite-jelly-gold-tiny {
      width: 24px;
      height: 24px;
      background-position: -136px -136px;
    }
    .sprite-jelly-silver-big {
      width: 58px;
      height: 58px;
      background-position: -160px -160px;
    }
    .sprite-jelly-silver-medium {
      width: 46px;
      height: 46px;
      background-position: -218px -218px;
    }
    .sprite-jelly-silver-small {
      width: 32px;
      height: 32px;
      background-position: -264px -264px;
    }
    .sprite-jelly-silver-tiny {
      width: 24px;
      height: 24px;
      background-position: -296px -296px;
    }
`

const Jello = styled.div`
  &:hover {
    animation: jello 1s;
  }
`
export interface JellyPropTypes {
  size: "tiny" | "small" | "medium" | "big"
  type: "silver" | "gold"
}
export const Jelly: React.SFC<JellyPropTypes> =  ({ type, size }) => (
  <Jello>
    <div className={`jelly-sprite jello sprite-jelly-${type || "silver"}-${size || "tiny"}`} />
  </Jello>
)

export default Jelly