import React from "react";
import { collectionShownName } from "controller_helpers/collection_shown";
import SpecializationsTagged from "controller_helpers/specialty_tags";
import { specializationTagText } from "controller_helpers/specialty_tags";
import { route } from "controller_helpers/routing";

const ReferralIconKey = ({model}) => {
  if (shouldDisplay(model)) {
    return(
      <div id="icon_key">
        <div className="title">Icon Key</div>
        <ul className="no-marker">
          {
            _.keys(model.app.referralIcons).map((key) => {
              return(
                <li key={key}>
                  <i className={model.app.referralIcons[key]}/>
                  <span>{model.app.referralTooltips[key]}</span>
                </li>
              )
            })
          }
          <WaittimeLegend model={model}/>
          <HorizontalRule model={model}/>
          {
            SpecializationsTagged(model).map((specialization) => {
              return(
                <li key={specialization.id} style={{ marginTop: 2 + 'px' }}>
                  <span className="badge" style={{ marginRight: 5 + 'px' }}>
                    {specialization.memberTag}
                  </span>
                  <span>{specializationTagText(specialization.id, model)}</span>
                </li>
              )
            })
          }
        </ul>
      </div>
    );
  } else {
    return <noscript/>;
  }
}

const WaittimeLegend = ({model}) => {
  if (model.app.currentUser.role != "psp") {
    return (
      <li>
        <i className="icon-link"/>
        <span>
          Wait times provided are specific to this area of practice
        </span>
      </li>
    );
  } else {
    return <noscript/>;
  }
}

const HorizontalRule = ({model}) => {
  if (SpecializationsTagged(model).length > 0) {
    return <hr/>;
  } else {
    return <span/>;
  }
}

const ROUTES = [
  "/specialties/:id",
  "/areas_of_practice/:id",
  "/hospitals/:id",
  "/languages/:id"
];

const shouldDisplay = (model) => {
  return _.includes(ROUTES, route) &&
    _.includes(["specialists", "clinics"], collectionShownName(model))
}

export default ReferralIconKey;
