import React, { Component } from "react";
import PropTypes from "prop-types";

import styles from './awardedScore.scss;

import AwardedScorePortal from "./awardedScorePortal";

import {SplitPaneContext} from "../../context";

class AwardedScore extends Component {
  static contextType = SplitPaneContext;

  constructor(props) {
    super(props);
    this.awardedScore = null;
  }

  componentDidMount() {
    this.startAnimation();
  }

  startAnimation() {
    // animate score
  }

  render() {
    const { points } = this.props;

return (
      <AwardedScorePortal>
        <div
          className={this.context === 'top' ? styles.upsideDown : ''}
          ref={elem => { this.awardedScore = elem; }}
        >
          <p>{points} points</p>
        </div>
      </AwardedScorePortal>
    );
  }
}

AwardedScore.propTypes = {
  points: PropTypes.number
};

export default AwardedScore;