import InfoTip from "../Infotip/Infotip";
import Subscribe from "./Subscribe";
import SocialLinks from "./SocialLinks";
import pjson from "../../package.json";
import { OpenInNewIcon } from "../../lib/SvgComponents";

const infoTipLabel =
  "When dialing 711, you will automatically be connected to a TRS Communications Assistant who will relay your conversation to the help desk agent with strict confidentiality.";
const { version: buildVersion } = pjson;
const openWindowStyles = {
  width: "1.3em",
  height: "1.3em",
  verticalAlign: "middle",
  margin: "0 0 4px 4px",
};

const DevPreFooter = () => (
  <>
    <div className="feedback-session-sign-up">
      <div className="responsive-container">
        <hr />
        <p>
          <strong>Help shape the future of QPP.</strong> Participate in a user
          feedback session.{" "}
          <a
            className="email-note-link"
            href="https://qpp.cms.gov/about/hcd-research"
          >
            Sign up now
            <OpenInNewIcon style={openWindowStyles} />
          </a>
        </p>
      </div>
    </div>
    <footer className="global-footer">
      <div className="build-version" id="build-version">
        {buildVersion}
      </div>
      <div className="responsive-container">
        <>
          <div className="global-footer-container">
            <div className="footer-resources">
              <h3 className="sub-title">Resources</h3>
              <ul>
                <li>
                  <a
                    href="https://qpp.cms.gov/about/resource-library"
                    aria-label="Resource Library"
                    data-track-category="FooterNav"
                    data-track-action="OpenEducationAndTools"
                    data-track-label="Education and Tools"
                  >
                    Resource Library
                    <OpenInNewIcon className="ccsq-link-icon" />
                  </a>
                </li>
                <li>
                  <a
                    href="https://qpp.cms.gov/resources/help-and-support"
                    aria-label="Help and Support"
                    data-track-category="FooterNav"
                    data-track-action="OpenHelpAndSupport"
                    data-track-label="Help and Support"
                  >
                    Help and Support
                    <OpenInNewIcon className="ccsq-link-icon" />
                  </a>
                </li>
                <li>
                  <a
                    href="https://qpp.cms.gov/about/small-underserved-rural-practices"
                    aria-label="Support for Small Practices"
                    data-track-category="FooterNav"
                    data-track-action="OpenSupportSmallPractices"
                    data-track-label="Support for Small Practices"
                  >
                    Support for Small Practices
                    <OpenInNewIcon className="ccsq-link-icon" />
                  </a>
                </li>
                <li>
                  <a
                    href="https://qpp.cms.gov/developers"
                    aria-label="Developer Tools"
                    data-track-category="FooterNav"
                    data-track-action="OpenDeveloperTools"
                    data-track-label="Quality Payment Program"
                  >
                    Developer Tools
                    <OpenInNewIcon className="ccsq-link-icon" />
                  </a>
                </li>
                <li>
                  <a
                    href="https://qpp.cms.gov/glossary"
                    aria-label="Glossary"
                    data-track-category="FooterNav"
                    data-track-action="OpenGlossary"
                    data-track-label="Glossary"
                  >
                    Glossary
                    <OpenInNewIcon className="ccsq-link-icon" />
                  </a>
                </li>
              </ul>
            </div>
            <div className="footer-contact-cms">
              <h3 className="sub-title">Contact CMS</h3>
              <p className="contact-title">Phone:</p>
              <p>Monday - Friday 8 a.m - 8 p.m ET</p>
              <p>
                1-866-288-8292 (TRS: 711)
                <span id="info-tip" className="footer-trs-infotip">
                  <InfoTip
                    aria-labelledby="footer-trs-infotip"
                    ariaLabel="TRS Communications Assistant Information"
                    label={infoTipLabel}
                  />
                </span>
              </p>

              <p className="contact-title">Email:</p>
              <p>
                <a
                  aria-label="QPP@cms.hhs.gov"
                  href="mailto:QPP@cms.hhs.gov"
                  className="email-link"
                >
                  QPP@cms.hhs.gov
                </a>
              </p>

              <p className="contact-title">QPP Service Center:</p>
              <h3 className="sub-title qpp-u-margin-y--0">
                <a
                  href="https://cmsqualitysupport.servicenowservices.com/ccsq_support_central"
                  aria-label="Create or Track a QPP Service Center Ticket"
                  className="email-link"
                  target="__blank"
                  rel="noopener noreferrer"
                >
                  <strong>Create or Track a QPP Service Center Ticket</strong>
                  <OpenInNewIcon className="ccsq-link-icon" />
                </a>
              </h3>
            </div>
            <div className="footer-social-newsletter">
              <h3 className="sub-title">Stay Connected</h3>
              <SocialLinks />
              <h3 className="sub-title">Sign Up for the QPP Listserv</h3>
              <Subscribe />
            </div>
          </div>
          <hr />
        </>

        <div className="other-links">
          <ul className="small">
            <li>
              <a
                href="https://qpp.cms.gov/privacy"
                aria-label="CMS Privacy Notice"
                data-track-category="FooterNav"
                data-track-action="OpenPrivacyDisclaimer"
                data-track-label="CMS Privacy Notice"
              >
                CMS Privacy Notice
                <OpenInNewIcon style={openWindowStyles} />
              </a>
            </li>
            <li className="divider"></li>{" "}
            <li>
              <a
                href="https://qpp.cms.gov/accessibility"
                aria-label="Accessibility"
                data-track-category="FooterNav"
                data-track-action="OpenAccessibility"
                data-track-label="Accessibility"
              >
                Accessibility
                <OpenInNewIcon style={openWindowStyles} />
              </a>
            </li>
            <li className="divider"></li>{" "}
            <li>
              <a
                aria-label="Download Adobe Reader"
                className="adobe-link"
                rel="noopener noreferrer"
                target="_blank"
                href="https://get.adobe.com/reader"
                data-track-category="FooterNav"
                data-track-action="DownloadAdobeReader"
                data-track-label="AdobeReader"
              >
                Download Adobe Reader
                <OpenInNewIcon style={openWindowStyles} />
              </a>
            </li>
          </ul>
          <hr />
        </div>
        <div className="qpp-hhs-logo-container">
          <div className="qpp-logo-container">
            <img
              className="qpp-logo"
              src="https://qpp.cms.gov/assets/images/qpp_logo_rgb_color.png"
              alt="qpp logo"
            />
          </div>
          <div className="hhs-logo-container">
            <img
              className="hhs-logo"
              alt="Department of Health &amp; Human Services USA"
              src="https://qpp.cms.gov/assets/images/hhs-logo-black.svg"
            />
            <p>
              A federal government website managed and paid for by the U.S
              Centers for Medicare &amp; Medicaid Services. 7500 Security
              Boulevard, Baltimore MD 21244
            </p>
          </div>
        </div>
      </div>
    </footer>
  </>
);

export default DevPreFooter;