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

export default class GreenSurfaceArea extends Component {
  constructor() {
    super();
    this.state = {
      measures: 0,
    };
  }

  componentDidMount() {
    const gsaCard = document.getElementById('greensurfacearea');
    let measures = 0;
    if (gsaCard != null) {
      measures = gsaCard.clientHeight;
    }

    this.setState({
      measures,
    });
  }

  getBackgroundStyle = () => ({
    position: 'relative',
    width: '100%',
    height: '100%',
    background: '#676363', // "#87CEFA" não fica muito bem a cor ativa, ponderar mudar depois,
  });

  styleTitle = () => ({
    position: 'absolute',
    width: '580px',
    height: '88px',
    left: '32px',
    top: '16px',

    fontFamily: 'ibm-plex-sans',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '64px',
    lineHeight: '88px',
    textAlign: 'left',
    color: '#ffffff',
    zIndex: '5',
  });

  styleDescription = () => ({
    position: 'absolute',
    width: '556px',
    height: '32px',
    left: '56px',
    top: '92px',

    fontFamily: 'ibm-plex-sans',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '22px',
    lineHeight: '32px',
    textAlign: 'left',
    color: '#ffffff',
    zIndex: '5',
  });

  stylePath = (x, y, value) => {
    const GSAProps = this.props;
    const { unifiedMeasure } = GSAProps.metric;
    const { measures } = this.state;
    const stringX = `${x}%`;
    const stringY = `${y}%`;
    const measure = `${(unifiedMeasure / 100) * measures * value}px`;
    return ({
      position: 'absolute',
      width: measure,
      height: measure,
      left: stringX,
      top: stringY,
      zIndex: 1,
      background: '#4CD60E',
      borderRadius: '50%',
    });
  };

  render() {
    const GSAProps = this.props;

    const surfaces = (
      <div>
        <div className="surface" style={this.stylePath(5, 40, 1)} />
        <div className="surface" style={this.stylePath(75, 40, 0.3)} />
        <div className="surface" style={this.stylePath(50, 15, 0.5)} />
        <div className="surface" style={this.stylePath(50, 70, 0.45)} />
      </div>
    );

    return (
      <div id="greensurfacearea" className="GreenSurfaceAreaCard" style={this.getBackgroundStyle()}>
        <div className="title">
          <h1 style={this.styleTitle()}>
            {GSAProps.metric.measure + GSAProps.metric.title}
          </h1>
        </div>

        <div className="description">
          <h2 style={this.styleDescription()}>
            <i
              className="fas fa-level-up-alt fa-rotate-90 fa-xs"
              style={{ marginRight: 10 }}
            />
            {GSAProps.metric.description}
          </h2>
        </div>
        {surfaces}
      </div>
    );
  }
}

GreenSurfaceArea.propTypes = {
  metric: PropTypes.shape({
    metricName: PropTypes.string,
    title: PropTypes.string,
    description: PropTypes.string,
    measure: PropTypes.number,
    unifiedMeasure: PropTypes.number,
  }).isRequired,
};