"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _templateObject = _taggedTemplateLiteral(["\n    :root {\n      --textBlack: #030E26;\n      --shark: #24292E;\n      --porcelain: #F4F6F7;\n      --silver: #cecece;\n      --whiteAlpha75: rgba(255,255,255,0.75);\n      --whiteAlpha10: rgba(255,255,255,0.1);\n      --blackAlpha75: rgba(0,0,0,0.75);\n      --blackAlpha05: rgba(0,0,0,0.05);\n\n      /* blues */\n      --cerulean: #10ADE4;\n      --azure: #3558A8;\n      --biscay: #222D38;\n      --orient: #004A7C;\n      --powderBlue: #B2D5E5;\n      --blueWood: #27324B;\n\n      --siteMaxWidth: 75rem;\n      --contentMaxWidth: 62rem;\n      --copyMaxWidth: 42rem;\n\n      --smScreen: 48rem;\n      --mdScreen: 62rem;\n      --lgScreen: 75rem;\n\n      --smBorderRadius: 2px;\n      --lgBorderRadius: 4px;\n    }\n    .flex-container {\n      display: flex;\n      margin: 0px auto;\n      width: 100%;\n      min-height: 2rem;\n    } \n}\n"], ["\n    :root {\n      --textBlack: #030E26;\n      --shark: #24292E;\n      --porcelain: #F4F6F7;\n      --silver: #cecece;\n      --whiteAlpha75: rgba(255,255,255,0.75);\n      --whiteAlpha10: rgba(255,255,255,0.1);\n      --blackAlpha75: rgba(0,0,0,0.75);\n      --blackAlpha05: rgba(0,0,0,0.05);\n\n      /* blues */\n      --cerulean: #10ADE4;\n      --azure: #3558A8;\n      --biscay: #222D38;\n      --orient: #004A7C;\n      --powderBlue: #B2D5E5;\n      --blueWood: #27324B;\n\n      --siteMaxWidth: 75rem;\n      --contentMaxWidth: 62rem;\n      --copyMaxWidth: 42rem;\n\n      --smScreen: 48rem;\n      --mdScreen: 62rem;\n      --lgScreen: 75rem;\n\n      --smBorderRadius: 2px;\n      --lgBorderRadius: 4px;\n    }\n    .flex-container {\n      display: flex;\n      margin: 0px auto;\n      width: 100%;\n      min-height: 2rem;\n    } \n}\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _reactIntl = require("react-intl");

var _Button = require("./Button");

var _Button2 = _interopRequireDefault(_Button);

var _ButtonGroup = require("./ButtonGroup");

var _ButtonGroup2 = _interopRequireDefault(_ButtonGroup);

var _MenuButton = require("./MenuButton");

var _MenuButton2 = _interopRequireDefault(_MenuButton);

var _Colors = require("./Colors");

var Color = _interopRequireWildcard(_Colors);

var _Events = require("./Events");

var _Logomark = require("./Logomark");

var _Logomark2 = _interopRequireDefault(_Logomark);

var _Images = require("../Images");

var _Link = require("./Link");

var _Link2 = _interopRequireDefault(_Link);

var _Normalize = require("../Normalize.js");

var _Normalize2 = _interopRequireDefault(_Normalize);

var _MenuDropdown = require("./MenuDropdown");

var _MenuDropdown2 = _interopRequireDefault(_MenuDropdown);

var _throttle = require("./throttle.js");

var _throttle2 = _interopRequireDefault(_throttle);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var publicRuntimeConfig = {
  headerSearchURL: 'https://blockchain.com/search?search=',
  walletLoginURL: 'https://login.blockchain.com/#/login',
  walletSignupURL: 'https://login.blockchain.com/#/signup'
};
var SEARCH_URL = publicRuntimeConfig.headerSearchURL;
var HIDE_HEADER_MIN_WIDTH = 768;
var HIDE_HEADER_MIN_SCROLL = 100;

var lightTheme = {
  main: "white",
  secondary: "" + Color.whiteAlpha10,
  placeholder: "" + Color.whiteAlpha75,
  headerScroll: "" + Color.bigStone
};

var darkTheme = {
  main: "" + Color.biscay,
  secondary: "" + Color.blackAlpha05,
  placeholder: "" + Color.blackAlpha75,
  headerScroll: "white"
};

(0, _styledComponents.injectGlobal)(_templateObject);

var GlobalNav = _styledComponents2.default.div.attrs({
  className: "flex-container"
}).withConfig({
  displayName: "Navigation__GlobalNav"
})(["", " background-color:", ";position:", ";z-index:100;&.hidden{opacity:0;transform:translate(0,-4rem);transition:transform 0.4s,opacity 0.2s;}&.visible{opacity:1;transform:translate(0,0);transition:transform 0.4s,opacity 0.2s;}&.scrollup{background-color:", ";}@media only screen and (max-width:48rem){position:", ";}"], _Normalize2.default, function (props) {
  return props.backgroundColor ? props.backgroundColor : "transparent";
}, function (props) {
  return props.position;
}, function (props) {
  return props.navColor ? props.navColor : "white";
}, function (props) {
  return props.position;
});

var NavWrapper = _styledComponents2.default.div.attrs({
  className: "flex-container"
}).withConfig({
  displayName: "Navigation__NavWrapper"
})(["height:4rem;flex-direction:row;justify-content:space-between;align-items:center;max-width:var(--siteMaxWidth);padding:0 2rem;"]);

var NavInner = _styledComponents2.default.div.withConfig({
  displayName: "Navigation__NavInner"
})(["display:flex;align-items:center;a{font-size:1rem;font-weight:600;}&:first-child{margin-top:4px;}&:nth-child(3){margin-left:1rem;margin-right:auto;flex:1 0 auto;> input[type=\"search\"]{width:0;transition:width 0.4s ease;background-color:transparent;border:none;outline:none;padding-left:2.5rem;border-bottom:2px solid transparent;margin-left:-1.75rem;margin-bottom:-1px;font-weight:500;line-height:2.5rem;cursor:pointer;color:", ";z-index:10;&::-webkit-search-cancel-button{margin-left:1rem;}&::placeholder{color:", ";}}.search-icon{fill:", ";}> input[type=\"search\"]:focus{width:100%;border-bottom:2px solid white;border-bottom:", ";cursor:text;transition:all 0.4s ease;}}&.search-active{display:none;}@media only screen and (max-width:48rem){&:not(:first-child){display:none;}}"], function (props) {
  return props.textColor ? props.textColor : "white";
}, function (props) {
  return props.placeholderColor ? props.placeholderColor : "white";
}, function (props) {
  return props.textColor ? props.textColor : "white";
}, function (props) {
  return props.textColor ? "2px solid " + props.textColor : "2px solid white";
});

var MenuButtonWrap = _styledComponents2.default.div.withConfig({
  displayName: "Navigation__MenuButtonWrap"
})(["display:none;z-index:1000;@media only screen and (max-width:48rem){display:flex;}"]);

var DropdownWrap = _styledComponents2.default.div.withConfig({
  displayName: "Navigation__DropdownWrap"
})(["h5{font-size:1rem;font-weight:600;margin-bottom:0.25rem;color:", ";}> ul > li{padding:0.75rem 0;}> ul > li:hover h5{text-decoration:underline;}> ul > li > a > p.desc{font-size:0.875rem;color:", ";opacity:0.5;font-weight:500;}"], Color.azure, Color.textBlack);

var productsList = [{
  title: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.products.wallet", defaultMessage: "Wallet" }),
  desc: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.products.wallet-desc", defaultMessage: "Send, Receive, and Trade" }),
  link: "https://blockchain.com/wallet",
  event: "header_wallet"
}, {
  title: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.data.explorer", defaultMessage: "Explorer" }),
  desc: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.data.explorer-desc", defaultMessage: "Search and Verify Transactions" }),
  link: "https://blockchain.com/explorer",
  event: "header_explorer"
}, {
  title: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.products.bps", defaultMessage: "Principal Strategies" }),
  desc: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.products.bps-desc", defaultMessage: "Institutional Portal" }),
  link: "https://bps.blockchain.com",
  event: "header_principal"
}, {
  title: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.products.developers", defaultMessage: "Developers" }),
  desc: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.products.developers-desc", defaultMessage: "Access our API" }),
  link: "https://blockchain.com/api",
  event: "header_developers"
}];

var dataList = [{
  title: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.data.markets", defaultMessage: "Markets" }),
  desc: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.data.markets-desc", defaultMessage: "Prices, Quotes, and More" }),
  link: "https://blockchain.com/markets",
  event: "header_markets"
}, {
  title: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.data.charts", defaultMessage: "Charts" }),
  desc: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.data.charts-desc", defaultMessage: "Stats and Network Activity" }),
  link: "https://blockchain.com/charts",
  event: "header_charts"
}];

var ListWrap = function ListWrap(items) {
  return _react2.default.createElement(
    DropdownWrap,
    null,
    _react2.default.createElement(
      "ul",
      null,
      items.map(function (item, index) {
        return _react2.default.createElement(
          "li",
          { key: index },
          _react2.default.createElement(
            _Link2.default,
            { href: item.link, event: item.event },
            _react2.default.createElement(
              "h5",
              { className: "title" },
              item.title
            ),
            _react2.default.createElement(
              "p",
              { className: "desc" },
              item.desc
            )
          )
        );
      })
    )
  );
};

var dropdownMap = {
  products: {
    linkText: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.dropdown.products", defaultMessage: "Products" }),
    component: ListWrap(productsList),
    onActive: function onActive() {
      (0, _Events.trackEvent)("header_products");
    }
  },
  markets: {
    linkText: _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.dropdown.data", defaultMessage: "Data" }),
    component: ListWrap(dataList),
    onActive: function onActive() {
      (0, _Events.trackEvent)("header_data");
    }
  }
};

var MobileMenuContainer = _styledComponents2.default.div.withConfig({
  displayName: "Navigation__MobileMenuContainer"
})(["background:", ";height:auto;position:absolute;display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;padding:1rem 1.625rem;top:0.375rem;right:0.375rem;border-radius:var(--lgBorderRadius);z-index:1000;min-width:24rem;h5,ul > li > a > p.desc{color:white;}@media only screen and (max-width:36em){left:0.375rem;min-width:0;}"], Color.orient);

var MobileMenuItem = _styledComponents2.default.div.withConfig({
  displayName: "Navigation__MobileMenuItem"
})(["flex:1 1 auto;padding-top:1rem;padding-bottom:1rem;&:first-child{margin-top:2px;margin-bottom:1.5rem;padding:0;}&:last-child{padding-bottom:0;border-top:1px solid rgba(255,255,255,0.1);}"]);

var MobileMenu = function MobileMenu(props) {
  if (!props.active) {
    return null;
  }

  return _react2.default.createElement(
    MobileMenuContainer,
    null,
    _react2.default.createElement(
      MobileMenuItem,
      null,
      _react2.default.createElement(_Logomark2.default, { color: "white" })
    ),
    _react2.default.createElement(
      MobileMenuItem,
      null,
      _react2.default.createElement(
        _ButtonGroup2.default,
        null,
        _react2.default.createElement(
          _Button2.default,
          {
            textColor: "white",
            bgColor: "white",
            outline: true,
            href: publicRuntimeConfig.walletLoginURL,
            event: "header_login" },
          _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.login", defaultMessage: "Login" })
        ),
        _react2.default.createElement(
          _Button2.default,
          {
            href: publicRuntimeConfig.walletSignupURL,
            event: "header_signup" },
          _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.signup", defaultMessage: "Sign Up" })
        )
      )
    ),
    _react2.default.createElement(
      MobileMenuItem,
      null,
      ListWrap(productsList)
    ),
    _react2.default.createElement(
      MobileMenuItem,
      null,
      ListWrap(dataList)
    )
  );
};

var Spacer = _styledComponents2.default.div.withConfig({
  displayName: "Navigation__Spacer"
})(["height:4rem;@media only screen and (max-width:48rem){display:none;}"]);

var Header = function (_PureComponent) {
  _inherits(Header, _PureComponent);

  function Header(props) {
    _classCallCheck(this, Header);

    var _this = _possibleConstructorReturn(this, (Header.__proto__ || Object.getPrototypeOf(Header)).call(this, props));

    _this.state = {
      menuActive: false,
      search: false,
      showNav: true,
      searchText: ""
    };
    _this.handleResize = (0, _throttle2.default)(function (e) {
      if (window.innerWidth > 768) {
        _this.setState({ menuActive: false });
      }
    }, 200);
    _this.handleScroll = (0, _throttle2.default)(function (e) {
      var scrollTop = _this.getScrollTop();
      if (scrollTop === undefined) {
        return;
      }

      var windowHeight = window.innerHeight;
      var docHeight = document.body.scrollHeight;
      var windowWidth = window.innerWidth;

      if (windowWidth >= HIDE_HEADER_MIN_WIDTH && scrollTop > HIDE_HEADER_MIN_SCROLL && scrollTop < docHeight - windowHeight) {
        if (scrollTop > _this.previousScroll) {
          _this.setState({ showNav: false, scrollUp: false });
        } else {
          _this.setState({ showNav: true, scrollUp: scrollTop !== 0 });
        }
      } else if (scrollTop <= HIDE_HEADER_MIN_SCROLL) {
        _this.setState({ showNav: true, scrollUp: false });
      }

      _this.previousScroll = scrollTop;
    }, 200);

    _this.handleMenuClick = function (active) {
      _this.setState({ menuActive: active });
    };

    _this.handleSearchFocus = function () {
      _this.setState({ search: true });
      (0, _Events.trackEvent)("header_search");
    };

    _this.handleSearchBlur = function () {
      _this.setState({ search: false });
    };

    _this.handleSearchChange = function (e) {
      _this.setState({ searchText: e.target.value });
    };

    _this.handleSearchKey = function (e) {
      if (e.keyCode === 13) {
        var searchText = _this.state.searchText.trim();
        if (searchText.length) {
          _this.setState({ searchText: "" }, function () {
            (0, _Events.trackEvent)("header_search-query");
            _this.handleSearch(searchText);
          });
        }
      }
    };

    _this.handleSearch = function (text) {
      document.location = _this.props.searchURL + encodeURIComponent(text);
    };

    _this.previousScroll = 100;
    return _this;
  }

  _createClass(Header, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (window) {
        window.addEventListener("scroll", this.handleScroll, true);
        window.addEventListener("resize", this.handleResize, true);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (window) {
        window.removeEventListener("scroll", this.handleScroll);
        window.removeEventListener("resize", this.handleResize);
      }
    }
  }, {
    key: "getScrollTop",
    value: function getScrollTop() {
      if (window && document) {
        var supportScrollY = window.scrollY !== undefined;
        var supportPageOffset = window.pageYOffset !== undefined;
        var isCSS1Compat = (document.compatMode || "") === "CSS1Compat";
        var scrollTop = supportScrollY ? window.scrollY : supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

        return scrollTop;
      }
      return undefined;
    }
  }, {
    key: "render",
    value: function render() {
      var themeObj = this.props.theme === "light" ? darkTheme : lightTheme;
      var searchActive = this.state.search ? "search-active" : "";
      var navVisibility = this.state.showNav ? "visible" : "hidden";
      var navScrollUp = this.state.scrollUp ? "scrollup" : "";
      var navClasses = [navVisibility, navScrollUp].join(" ");
      var position = this.props.position || 'fixed';
      var dropdownTop = this.props.dropdownTop || 0;
      var backgroundColor = Color.azure;

      return _react2.default.createElement(
        _styledComponents.ThemeProvider,
        { theme: themeObj },
        _react2.default.createElement(
          _reactIntl.IntlProvider,
          null,
          _react2.default.createElement(
            "div",
            null,
            _react2.default.createElement(
              GlobalNav,
              { className: navClasses, backgroundColor: backgroundColor, navColor: themeObj.headerScroll, position: position },
              _react2.default.createElement(
                NavWrapper,
                null,
                _react2.default.createElement(
                  NavInner,
                  null,
                  _react2.default.createElement(
                    _Link2.default,
                    { href: "https://blockchain.com", event: "header_logo" },
                    _react2.default.createElement(_Logomark2.default, { color: "white" })
                  )
                ),
                _react2.default.createElement(
                  NavInner,
                  null,
                  _react2.default.createElement(_MenuDropdown2.default, { dropdownTop: dropdownTop, map: dropdownMap })
                ),
                _react2.default.createElement(
                  NavInner,
                  {
                    textColor: themeObj.main,
                    placeholderColor: themeObj.placeholder,
                    className: "search-default" },
                  _react2.default.createElement(_Images.Image, { name: "search", height: "20px", width: "20px" }),
                  _react2.default.createElement("input", {
                    onFocus: this.handleSearchFocus,
                    onBlur: this.handleSearchBlur,
                    onChange: this.handleSearchChange,
                    onKeyUp: this.handleSearchKey,
                    value: this.state.searchText,
                    type: "search",
                    name: "search",
                    placeholder: "Look up blocks, transactions, hash..."
                  })
                ),
                _react2.default.createElement(
                  NavInner,
                  { className: searchActive },
                  _react2.default.createElement(
                    _ButtonGroup2.default,
                    null,
                    _react2.default.createElement(
                      _Button2.default,
                      {
                        bgColor: themeObj.secondary,
                        textColor: themeObj.main,
                        href: publicRuntimeConfig.walletLoginURL,
                        event: "header_login" },
                      _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.login", defaultMessage: "Login" })
                    ),
                    _react2.default.createElement(
                      _Button2.default,
                      {
                        bgColor: themeObj.secondary,
                        textColor: themeObj.main,
                        href: publicRuntimeConfig.walletSignupURL,
                        event: "header_signup" },
                      _react2.default.createElement(_reactIntl.FormattedMessage, { id: "header.signup", defaultMessage: "Sign Up" })
                    )
                  )
                ),
                _react2.default.createElement(MobileMenu, { active: this.state.menuActive }),
                _react2.default.createElement(
                  MenuButtonWrap,
                  null,
                  _react2.default.createElement(_MenuButton2.default, {
                    color: themeObj.main,
                    active: this.state.menuActive,
                    callback: this.handleMenuClick
                  })
                )
              )
            ),
            position === 'fixed' && _react2.default.createElement(Spacer, null)
          )
        )
      );
    }
  }]);

  return Header;
}(_react.PureComponent);

Header.defaultProps = {
  searchURL: SEARCH_URL
};
exports.default = Header;