import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { Modal, Button, Grid, Row, Table, Col } from "react-bootstrap";
import axios from "axios";
import Loading from "../../../../layout/Loading";
import { formatNumber } from "../../../../utilities/formatter";

function ScreeningScoresModal({ children, entityId }) {
  const [modalActive, setModalActive] = useState(false);
  const [screeningDetails, setScreeningDetails] = useState(null);

  useEffect(() => {
    axios
      .get("/api/company/" + entityId + "/screening_score_details")
      .then(res => setScreeningDetails(res.data));
  }, []);

  return (
    <>
      <Modal
        show={modalActive}
        onHide={() => setModalActive(false)}
        dialogClassName="semi-wide-modal"
      >
        <Modal.Header closeButton>Screening Scores</Modal.Header>
        <Modal.Body>
          {screeningDetails ? (
            <Grid fluid style={{ fontSize: "13px" }}>
              <Row>
                <h4>Quality Score</h4>
                <Table condensed striped>
                  <thead>
                    <tr>
                      <th> </th> <th className="text-center">Average</th>{" "}
                      <th className="text-center col-md-1">RoAIC</th>
                      <th className="text-center col-md-1">RoAIC Tang.</th>{" "}
                      <th className="text-center col-md-1">GPoA</th>
                      <th className="text-center col-md-1">RoE</th>{" "}
                      <th className="text-center col-md-1">CFoA</th>
                      <th className="text-center col-md-1">Gross Marg.</th>{" "}
                      <th className="text-center col-md-1">Operating Marg.</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Level</td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs70"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs100"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs101"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs102"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs103"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs104"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs105"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs106"] * 100, 0)}
                      </td>
                    </tr>
                    <tr>
                      <td>Trend</td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs71"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs110"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs111"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs112"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs113"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs114"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs115"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs116"] * 100, 0)}
                      </td>
                    </tr>
                    <tr>
                      <td>Consistency</td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs72"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs120"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs121"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs122"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs123"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs124"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs125"] * 100, 0)}
                      </td>
                      <td className="text-center">
                        {formatNumber(screeningDetails.pct_score["cs126"] * 100, 0)}
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <strong>Quality Score</strong>
                      </td>
                      <td className="text-center">
                        <strong>{formatNumber(screeningDetails.pct_score["cs80"] * 100, 0)}</strong>
                      </td>
                    </tr>
                  </tbody>
                </Table>
              </Row>
              <Row>
                <h4>Random Forest score</h4>
                <Col lg={6}>
                  <strong>Top factors</strong>
                  <Table condensed striped>
                    <thead>
                      <tr>
                        <th>Factor</th>
                        <th>Contribution</th>
                      </tr>
                    </thead>
                    <tbody>
                      {screeningDetails.random_forest_scores_top.map(el => (
                        <tr key={el.description}>
                          <td>{el.description}</td>
                          <td>{formatNumber(el.contribution * 100, 0)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </Table>
                </Col>
                <Col lg={6}>
                  <strong>Bottom factors</strong>
                  <Table condensed striped>
                    <thead>
                      <tr>
                        <th>Factor</th>
                        <th>Contribution</th>
                      </tr>
                    </thead>
                    <tbody>
                      {screeningDetails.random_forest_scores_bottom.map(el => (
                        <tr key={el.description}>
                          <td>{el.description}</td>
                          <td>{formatNumber(el.contribution * 100, 0)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </Table>
                </Col>
              </Row>
              <Row>
                <Col lg={6}>
                  <h4>Peer Score</h4>
                  <Table condensed striped>
                    <thead>
                      <tr>
                        <th>Portfolio</th>
                        <th>Comment</th>
                      </tr>
                    </thead>
                    <tbody>
                      {screeningDetails.investor_scores.map(el => (
                        <tr key={el.portfolio}>
                          <td>{el.portfolio}</td>
                          <td>{el.quartile + " Quartile"}</td>
                        </tr>
                      ))}
                    </tbody>
                  </Table>
                </Col>
              </Row>
            </Grid>
          ) : (
            <div style={{ height: "200px" }}>
              <Loading />
            </div>
          )}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={() => setModalActive(false)}>Close</Button>
        </Modal.Footer>
      </Modal>
      {children(setModalActive)}
    </>
  );
}

ScreeningScoresModal.propTypes = {
  entityId: PropTypes.number.isRequired
};

export default ScreeningScoresModal;