import React, { PropTypes } from "react";
import { ListItem } from "material-ui";
import OpenInNewIcon from "material-ui/svg-icons/action/open-in-new";

const NavListItem = props => {
  const { contents, url, description, label, openInNew } = props.data;
  const { currentHash, ReactGA } = props;
  const listDataArray = Array.isArray(contents) ? [...contents] : [contents];

  const navItems = contents
    ? listDataArray.map((item, counter) => (
        <NavListItem insetChildren data={item} key={counter} />
      ))
    : undefined;

  /*
onkeydown="cancelBubble(event);ptgpPage.stepKeyboardEventHandler(event, 'ADMN_S201805150830505996253577');"
href="https://cs.dev.catalystnpd.uc.edu/psc/ps_newwin/EMPLOYEE/SA/c/SA_LEARNER_SERVICES.SSR_SSENRL_APPT.GBL?a=92"
onclick="
cancelBubble(event);
if (!top.ptgpPage.openCustomStepButton('ADMN_S201805150830505996253577')) top.ptgpPage.openUrlWithWarning(this.getAttribute('href'), 'top.ptgpPage.selectStep(\'ADMN_S201805150830505996253577\');', false);return false;"

*/

  const linkClicked = (name, url) => {
    alert("linkClicked " + name + ", " + url);
    if (!top.ptgpPage.openCustomStepButton(name)) {
      top.ptgpPage.openUrlWithWarning(
        url,
        "top.ptgpPage.selectStep('" + name + "');",
        false
      );
    }
    ReactGA.event({
      category: "Outbound",
      action: `${label} clicked`,
      label: url,
      transport: "beacon"
    });
  };

  console.log("props.data", props.data);

  return (
    <div>
      {navItems && (
        <ListItem
          insetChildren={props.insetChildren}
          primaryTogglesNestedList
          primaryText={label}
          secondaryText={description}
          nestedItems={navItems}
        />
      )}
      {url && (
        <ListItem
          insetChildren={props.insetChildren}
          primaryText={label}
          secondaryText={description}
          href={openInNew ? url : url + currentHash}
          onClick={() => linkClicked(props.data.Name, url)}
          rightIcon={openInNew ? <OpenInNewIcon /> : null}
          target={openInNew ? "_blank" : ""}
          rel="noopener noreferrer"
        />
      )}
    </div>
  );
};

NavListItem.propTypes = {
  data: PropTypes.object.isRequired,
  insetChildren: PropTypes.bool,
  currentHash: PropTypes.string,
  ReactGA: PropTypes.object
};

NavListItem.defaultProps = {
  ReactGA: { event: () => {} }
};

export default NavListItem;