import React, { Component } from 'react';
import styled from '@emotion/styled';

const MIN_PERCENTAGE = 2;

const Container = styled.div`
  height: 10vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  background-color: #${props => props.backgroundColor};
`;

const Progress = styled.div`
  z-index: 90;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: ${props => `#${props.backgroundColor}`};
  width: ${props => props.width}%;
`;

const Name = styled.div`
  z-index: 100;
  color: #fff;
  margin-left: 2.5vw;
  font-size: 5.5vh;
  font-family: 'DIN Next LT Pro Bold Condensed';
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  bottom: -.5vh;
  flex: 1;
`;

const Emoji = styled.div`
  display: flex;
  flex-direction: row;
  margin-right: 2vw;
  align-items: center;
`;

const Image = styled.div`
  width: 25px;
  height: 25px;
  margin-right: 1vw;
`;

const Shortcut = styled.div`
  font-family: 'DIN Next LT Pro Bold Condensed';
  font-weight: bold;
  font-size: 4.5vh;
  color: #fff;
`;

export default class ProgressBar extends Component {
  render() {
    const { colors, emoji, name, value } = this.props;
    const { shortcut } = emoji;

    let progressPercentage = value / 1000000 * 100;
    if (progressPercentage < MIN_PERCENTAGE) progressPercentage = MIN_PERCENTAGE;

    return (
      <Container backgroundColor={colors.dark}>
        <Progress
          backgroundColor={colors.primary}
          width={progressPercentage} />
        <Name>{name}</Name>
        <Emoji>
          <Image>
            <img src={emoji.imageUrl} alt="" />
          </Image>
          <Shortcut>:{shortcut}:</Shortcut>
        </Emoji>
      </Container>
    )
  }
}