import React from "react";

import {
  List,
  ListItem,
  TextField,
  Subheader,
  Avatar,
  Paper
} from "material-ui";
import OpenInNewIcon from "material-ui/svg-icons/action/open-in-new";

class QuickSearch extends React.Component {
  render() {
    // const { navigationCollection, serviceIndicators } = this.props.storeStates;
    // const { fetchServiceIndicators, fetchSearch } = this.props.storeDispatchers;
    const { maxResults, searchResults, getSearchResults } = this.props;

    /*
     openUrlWithWarning : function (pUrl, pOnLoad, pIsFluid) {

 if (typeof (pIsFluid) == this.UNDEFINED) pIsFluid = true; try {
 if (pIsFluid) {
 LaunchURL(null, pUrl, 6, "", "", false, true, pOnLoad); } else {
 LaunchURL(null, pUrl, 9, "", "", false, true, pOnLoad); }
 } catch (error) {
 
 }

 }
 */

    const linkClicked = (name, url) => {
      console.log("linClicked", { name, url });
      // ReactGA.event({
      //   category: "Quicksearch",
      //   action: `${label} clicked`,
      //   label: url,
      //   transport: "beacon"
      // });
      try {
        top.ptgpPage.openUrlWithWarning(
          url,
          "top.ptgpPage.selectStep('" + name + "');",
          false
        );
      } catch (error) {
        console.log("error", error);
      }
    };

    console.log("searchResults", searchResults);

    return (
      <div style={{ padding: "10px" }}>
        <TextField
          hintText="Search Navigation"
          onChange={(event, value) => getSearchResults(value, maxResults)}
          fullWidth
          hintStyle={{
            color: "#555"
          }}
          underlineDisabledStyle={{
            borderColor: "#555"
          }}
          underlineFocusStyle={{
            borderColor: "#000"
          }}
        />
        {searchResults &&
        searchResults.length > 0 &&
        searchResults.filter(result => result.HasResults === true).length >
          0 ? (
          <Paper>
            <List>
              {searchResults &&
                searchResults.map(
                  result =>
                    result.HasResults ? (
                      <div key={result.Name}>
                        <Subheader inset={false}>{result.Label}</Subheader>
                        {result.NavItems.sort((a, b) => a.score < b.score).map(
                          (navItem, counter) => {
                            if (navItem.item.imageUrl !== "") {
                              return (
                                <a
                                  key={result.Name + counter}
                                  href={/*navItem.item.url*/ "#"}
                                  onClick={() => {
                                    console.log("navItem", navItem);
                                    linkClicked(
                                      navItem.item.label,
                                      navItem.item.url
                                    );
                                    // linkClicked(
                                    //   navItem.item.name,
                                    //   navItem.item.absolutePortalURL
                                    // );
                                  }}
                                  style={{ linkStyle: "none", margin: "0" }}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                >
                                  <ListItem
                                    leftAvatar={
                                      <Avatar src={navItem.item.imageUrl} />
                                    }
                                    primaryText={navItem.item.label}
                                    secondaryText={navItem.item.description}
                                  />
                                </a>
                              );
                            }
                            return (
                              <a
                                key={result.Name + counter}
                                onClick={() => {
                                  console.log("navItem", navItem);
                                  linkClicked(
                                    navItem.item.label,
                                    navItem.item.url
                                  );
                                  // linkClicked(
                                  //   navItem.item.name,
                                  //   navItem.item.absolutePortalURL
                                  // );
                                }}
                                href={/*navItem.item.url*/ "#"}
                                style={{ linkStyle: "none" }}
                                target={navItem.item.openInNew ? "_blank" : ""}
                                rel="noopener noreferrer"
                              >
                                <ListItem
                                  key={result.Name + counter}
                                  primaryText={navItem.item.label}
                                  secondaryText={navItem.item.description}
                                  rightIcon={
                                    navItem.item.openInNew ? (
                                      <OpenInNewIcon />
                                    ) : null
                                  }
                                />
                              </a>
                            );
                          }
                        )}
                      </div>
                    ) : null
                )}
            </List>
          </Paper>
        ) : null}
      </div>
    );
  }
}

const { arrayOf, object, func, number } = React.PropTypes;

QuickSearch.propTypes = {
  navigation: arrayOf(object),
  fetchSearch: func,
  maxResults: number
};

export default QuickSearch;