department-of-veterans-affairs/vets-website

import React from 'react';
import { isEmpty, compact } from 'lodash';
import moment from 'moment';

import StatsBar from './StatsBar';

/**
 * VA Facility Statistics & Feedback from Vets/Patients
 */
export default function AccessToCare({ location }) {
  if (!location) {
    return null;
  }

  if (location.attributes.facilityType !== 'va_health_facility') {
    return null;
  }

  const healthFeedbackAttrs = location.attributes.feedback.health;
  const { effectiveDate } = location.attributes.feedback; // V1

  if (!healthFeedbackAttrs) {
    return null;
  }

  if (
    isEmpty(
      compact([
        healthFeedbackAttrs.primaryCareUrgent,
        healthFeedbackAttrs.specialtyCareUrgent,
        healthFeedbackAttrs.primaryCareRoutine,
        healthFeedbackAttrs.specialtyCareRoutine,
      ]),
    )
  ) {
    return null;
  }

  const renderStat = (label, value) => {
    if (!value) return null;

    return (
      <div>
        <p>
          <strong>{label}</strong>
        </p>
        <StatsBar percent={value * 100} />
      </div>
    );
  };

  return (
    <div className="vads-u-margin-bottom--4">
      <h4 className="highlight">Veteran-reported Satisfaction Scores</h4>
      <div className="vads-u-margin-bottom--4">
        <p>
          Current as of{' '}
          <strong>
            {moment(effectiveDate || healthFeedbackAttrs.effectiveDate).format(
              'LL',
            )}
          </strong>
        </p>
        <p>
          Veteran-reported satisfaction scores come from the Consumer Assessment
          of Health and Systems survey, which measures satisfaction of nearly
          150,000 Veterans across the U.S. every 6 months.
        </p>
        <h4>Urgent care appointments</h4>
        <p>
          % of Veterans who say they usually or always get an appointment when
          they need care right away
        </p>
        <div className="vads-u-margin-bottom--4">
          {renderStat(
            'Primary care at this location',
            healthFeedbackAttrs.primaryCareUrgent,
          )}
        </div>
        <div className="vads-u-margin-bottom--4">
          {renderStat(
            'Specialty care at this location',
            healthFeedbackAttrs.specialtyCareUrgent,
          )}
        </div>

        <h4>Routine care appointments</h4>
        <p>
          % of Veterans who say they usually or always get an appointment when
          they need it
        </p>
        <div className="vads-u-margin-bottom--4">
          {renderStat(
            'Primary care at this location',
            healthFeedbackAttrs.primaryCareRoutine,
          )}
        </div>
        <div className="vads-u-margin-bottom--4">
          {renderStat(
            'Specialty care at this location',
            healthFeedbackAttrs.specialtyCareRoutine,
          )}
        </div>
      </div>
    </div>
  );
}