<commit_before>import React, { useState } from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import appendQuery from 'append-query';
import { Link } from 'react-router-dom';
import { toggleValues } from 'platform/site-wide/feature-toggles/selectors';
import FEATURE_FLAG_NAMES from 'platform/utilities/feature-toggles/featureFlagNames';
import {
  addCompareInstitution,
  removeCompareInstitution,
  showModal,
} from '../../actions';
import { MINIMUM_RATING_COUNT } from '../../constants';
import CompareCheckbox from '../../components/CompareCheckbox';
import { estimatedBenefits } from '../../selectors/estimator';
import {
  formatCurrency,
  createId,
  convertRatingToStars,
} from '../../utils/helpers';
import { CautionFlagAdditionalInfo } from '../../components/CautionFlagAdditionalInfo';
import RatingsStars from '../../components/RatingsStars';
import SchoolClassification from '../../components/SchoolClassification';
import recordEvent from 'platform/monitoring/record-event';

export function ResultCard({
  compare,
  estimated,
  dispatchAddCompareInstitution,
  dispatchRemoveCompareInstitution,
  dispatchShowModal,
  institution,
  location = false,
  header = null,
  gibctSchoolRatings,
  active = false,
  version,
}) {
  const {
    name,
    city,
    state,
    studentCount,
    ratingAverage,
    ratingCount,
    accreditationType,
    cautionFlags,
    facilityCode,
    vetTecProvider,
    schoolProvider,
    employerProvider,
    preferredProvider,
    programCount,
    programLengthInHours,
  } = institution;
  const compareChecked = !!compare.search.institutions[facilityCode];
  const compareLength = compare.search.loaded.length;

  const handleCompareUpdate = e => {
    if (e.target.checked && !compareChecked) {
      if (compareLength === 3) {
        recordEvent({
          event: 'gibct-form-change',
          'gibct-form-field': 'compareCheckbox',
          'gibct-form-value': `Limit Reached | ${compareLength}`,
          'school-name': institution.name,
        });
        dispatchShowModal('comparisonLimit');
      } else {
        recordEvent({
          event: 'gibct-form-change',
          'gibct-form-field': 'compareCheckbox',
          'gibct-form-value': `Add | ${compareLength + 1}`,
          'school-name': institution.name,
        });
        dispatchAddCompareInstitution(institution);
      }
    } else {
      recordEvent({
        event: 'gibct-form-change',
        'gibct-form-field': 'compareCheckbox',
        'gibct-form-value': `Remove | ${compareLength - 1}`,
        'school-name': institution.name,
      });
      dispatchRemoveCompareInstitution(facilityCode);
    }
  };

  const [expanded, toggleExpansion] = useState(false);

  const profileLink = version
    ? appendQuery(`/institution/${facilityCode}`, { version })
    : `/institution/${facilityCode}`;

  const resultCardClasses = classNames('result-card', {
    'vads-u-margin-bottom--2': location,
    'vads-u-padding-right--1': location && !active,
    'vads-u-padding--0p5': active,
    active,
  });

  const containerClasses = classNames({
    'vads-u-margin-bottom--2': !location,
    'small-screen:vads-u-margin-left--2p5': !location,
    'vads-u-margin--0': location,
    'vads-u-padding--0': location,
  });

  const nameClasses = classNames({
    'vads-u-margin-top--2': !location,
    'vads-u-margin-top--1': location,
  });

  const nameCityStateHeader = (
    <>
      <div>
        <h3 className={nameClasses} id={`label-${institution.facilityCode}`}>
          <Link
            to={profileLink}
            onClick={() =>
              recordEvent({
                event: 'gibct-view-profile',
                'school-name': name,
                'has-warnings': cautionFlags.length > 0,
              })
            }
          >
            {name}
            <span className="vads-u-visibility--screen-reader">
              {city}
              {state && `, ${state}`}
            </span>
          </Link>
        </h3>
      </div>
      <p className="vads-u-padding--0">
        {city}
        {state && `, ${state}`}
      </p>
    </>
  );

  const stars = convertRatingToStars(ratingAverage);
  const displayStars =
    gibctSchoolRatings && stars && ratingCount >= MINIMUM_RATING_COUNT;

  const ratingsInformation = displayStars ? (
    <div>
      <div className="vads-u-margin-bottom--2">
        <RatingsStars rating={ratingAverage} />
        {location && <br />}
        <strong>
          ({Math.round(10 * ratingAverage) / 10} of 5) by {ratingCount} Veteran
          {ratingCount > 1 && 's'}
        </strong>
      </div>
    </div>
  ) : (
    <div>
      <p>
        <strong>Not yet rated by Veterans</strong>
      </p>
    </div>
  );

  const estimate = ({ qualifier, value }) => {
    if (qualifier === '% of instate tuition') {
      return <span>{value}% in-state</span>;
    } else if (qualifier === null) {
      return value;
    }
    return <span>{formatCurrency(value)}</span>;
  };

  const tuition = estimate(estimated.tuition);
  const housing = estimate(estimated.housing);

  const tuitionAndEligibility = (
    <>
      <p>
        <strong>You may be eligible for up to:</strong>
      </p>
      <div className="vads-u-display--flex vads-u-margin-top--0 vads-u-margin-bottom--2">
        <div className="vads-u-flex--1">
          <p className="secondary-info-label-large">Tuition benefit:</p>
          <p className="vads-u-margin-y--0">{tuition}</p>
        </div>
        <div className="vads-u-flex--1">
          <p className="secondary-info-label-large">Housing benefit:</p>
          <p className="vads-u-margin-y--0">
            {housing} /mo
            {employerProvider && '*'}
          </p>
        </div>
      </div>
      {employerProvider && (
        <p className="asterisk-text">
          * Housing rate and the amount of entitlement used decrease every 6
          months as training progresses<commit_msg>#VFEP-154 #comment added environment statement to remove code from production until ready for release (#22490)<commit_after>import React, { useState } from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import appendQuery from 'append-query';
import { Link } from 'react-router-dom';
import { toggleValues } from 'platform/site-wide/feature-toggles/selectors';
import FEATURE_FLAG_NAMES from 'platform/utilities/feature-toggles/featureFlagNames';
import recordEvent from 'platform/monitoring/record-event';
import environment from 'platform/utilities/environment';
import {
  addCompareInstitution,
  removeCompareInstitution,
  showModal,
} from '../../actions';
import { MINIMUM_RATING_COUNT } from '../../constants';
import CompareCheckbox from '../../components/CompareCheckbox';
import { estimatedBenefits } from '../../selectors/estimator';
import {
  formatCurrency,
  createId,
  convertRatingToStars,
} from '../../utils/helpers';
import { CautionFlagAdditionalInfo } from '../../components/CautionFlagAdditionalInfo';
import RatingsStars from '../../components/RatingsStars';
import SchoolClassification from '../../components/SchoolClassification';

export function ResultCard({
  compare,
  estimated,
  dispatchAddCompareInstitution,
  dispatchRemoveCompareInstitution,
  dispatchShowModal,
  institution,
  location = false,
  header = null,
  gibctSchoolRatings,
  active = false,
  version,
}) {
  const {
    name,
    city,
    state,
    studentCount,
    ratingAverage,
    ratingCount,
    accreditationType,
    cautionFlags,
    facilityCode,
    vetTecProvider,
    schoolProvider,
    employerProvider,
    preferredProvider,
    programCount,
    programLengthInHours,
  } = institution;
  const compareChecked = !!compare.search.institutions[facilityCode];
  const compareLength = compare.search.loaded.length;

  const handleCompareUpdate = e => {
    if (e.target.checked && !compareChecked) {
      if (compareLength === 3) {
        recordEvent({
          event: 'gibct-form-change',
          'gibct-form-field': 'compareCheckbox',
          'gibct-form-value': `Limit Reached | ${compareLength}`,
          'school-name': institution.name,
        });
        dispatchShowModal('comparisonLimit');
      } else {
        recordEvent({
          event: 'gibct-form-change',
          'gibct-form-field': 'compareCheckbox',
          'gibct-form-value': `Add | ${compareLength + 1}`,
          'school-name': institution.name,
        });
        dispatchAddCompareInstitution(institution);
      }
    } else {
      recordEvent({
        event: 'gibct-form-change',
        'gibct-form-field': 'compareCheckbox',
        'gibct-form-value': `Remove | ${compareLength - 1}`,
        'school-name': institution.name,
      });
      dispatchRemoveCompareInstitution(facilityCode);
    }
  };

  const [expanded, toggleExpansion] = useState(false);

  const profileLink = version
    ? appendQuery(`/institution/${facilityCode}`, { version })
    : `/institution/${facilityCode}`;

  const resultCardClasses = classNames('result-card', {
    'vads-u-margin-bottom--2': location,
    'vads-u-padding-right--1': location && !active,
    'vads-u-padding--0p5': active,
    active,
  });

  const containerClasses = classNames({
    'vads-u-margin-bottom--2': !location,
    'small-screen:vads-u-margin-left--2p5': !location,
    'vads-u-margin--0': location,
    'vads-u-padding--0': location,
  });

  const nameClasses = classNames({
    'vads-u-margin-top--2': !location,
    'vads-u-margin-top--1': location,
  });

  const nameCityStateHeader = (
    <>
      <div>
        <h3 className={nameClasses} id={`label-${institution.facilityCode}`}>
          <Link
            to={profileLink}
            onClick={() =>
              recordEvent({
                event: 'gibct-view-profile',
                'school-name': name,
                'has-warnings': cautionFlags.length > 0,
              })
            }
          >
            {name}
            <span className="vads-u-visibility--screen-reader">
              {city}
              {state && `, ${state}`}
            </span>
          </Link>
        </h3>
      </div>
      <p className="vads-u-padding--0">
        {city}
        {state && `, ${state}`}
      </p>
    </>
  );

  // toggle for production/staging------------------------------------------------
  let ratingsInformation = ''; // delete when ready for production, this will be a const
  if (!environment.isProduction()) {
    const stars = convertRatingToStars(ratingAverage);
    const displayStars =
      gibctSchoolRatings && stars && ratingCount >= MINIMUM_RATING_COUNT;

    ratingsInformation = displayStars ? ( // changed to a const when ready for production
      <div>
        <div className="vads-u-margin-bottom--2">
          <RatingsStars rating={ratingAverage} />
          {location && <br />}
          <strong>
            ({Math.round(10 * ratingAverage) / 10} of 5) by {ratingCount}{' '}
            Veteran
            {ratingCount > 1 && 's'}
          </strong>
        </div>
      </div>
    ) : (
      <div>
        <p>
          <strong>Not yet rated by Veterans</strong>
        </p>
      </div>
    );
  }
  // end toggle for production/staging------------------------------------------------

  const estimate = ({ qualifier, value }) => {
    if (qualifier === '% of instate tuition') {
      return <span>{value}% in-state</span>;
    }
    if (qualifier === null) {
      return value;
    }
    return <span>{formatCurrency(value)}</span>;
  };

  const tuition = estimate(estimated.tuition);
  const housing = estimate(estimated.housing);

  const tuitionAndEligibility = (
    <>
      <p>
        <strong>You may be eligible for up to:</strong>
      </p>
      <div className="vads-u-display--flex vads-u-margin-top--0 vads-u-margin-bottom--2">
        <div className="vads-u-flex--1">
          <p className="secondary-info-label-large">Tuition benefit:</p>
          <p className="vads-u-margin-y--0">{tuition}</p>
        </div>
        <div className="vads-u-flex--1">
          <p className="secondary-info-label-large">Housing benefit:</p>
          <p className="vads-u-margin-y--0">
            {housing} /mo
            {employerProvider && '*'}
          </p>
        </div>
      </div>
      {employerProvider && (
        <p className="asterisk-text">
          * Housing rate and the amount of entitlement used decrease every 6
          months as training progresses
{'fraction_non_alphanumeric': 0.15288561594492917, 'fraction_numerical': 0.0057632274073481145, 'mean_word_length': 2.4314748695413346, 'pattern_counts': {'":': 0, '<': 103, '<?xml version=': 0, '>': 115, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4934809', 'n_tokens_mistral': 3808, 'n_tokens_neox': 3730, 'n_words': 746}