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

const config = getConfig().publicRuntimeConfig

const Styled = styled.div`
  .cate-sprite {
    background-image: url(${config.staticFolder || ""}/ui-assets/navigation-bar/sprite-category.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) {
    .cate-sprite {
      background-image: url(${config.staticFolder || ""}/ui-assets/navigation-bar/sprite-category@2x.png);
        background-size: 322px 23px;
    }
  }

  .sprite-comedy {
    width: 23px;
    height: 23px;
    background-position: 0 0;
  }

  .sprite-crime {
    width: 23px;
    height: 23px;
    background-position: -23px 0;
  }

  .sprite-drama {
    width: 23px;
    height: 23px;
    background-position: -46px 0;
  }

  .sprite-erotic {
    width: 23px;
    height: 23px;
    background-position: -69px 0;
  }

  .sprite-fantacy {
    width: 23px;
    height: 23px;
    background-position: -92px 0;
  }

  .sprite-horror {
    width: 23px;
    height: 23px;
    background-position: -115px 0;
  }

  .sprite-period {
    width: 23px;
    height: 23px;
    background-position: -138px 0;
  }

  .sprite-recent {
    width: 23px;
    height: 23px;
    background-position: -161px 0;
  }

  .sprite-romantic {
    width: 23px;
    height: 23px;
    background-position: -184px 0;
  }

  .sprite-teen {
    width: 23px;
    height: 23px;
    background-position: -207px 0;
  }

  .sprite-trendy {
    width: 23px;
    height: 23px;
    background-position: -230px 0;
  }

  .sprite-truestory {
    width: 23px;
    height: 23px;
    background-position: -253px 0;
  }

  .sprite-y {
    width: 23px;
    height: 23px;
    background-position: -276px 0;
  }

  .sprite-jamsai {
    width: 23px;
    height: 23px;
    background-position: -299px 0;
  }
`

export default ({ name, className, style, children }: { name: string, className?: string, style?: any, children?: any }) => (
  <Styled className={`cate-sprite sprite-${name} ${className}`} style={style}>
    <div className={`cate-sprite sprite-${name} ${className || ""}`}>
      {children}
    </div>
  </Styled>
)