"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _HeaderSt = require("./Header.st.css.js");
var _react = _interopRequireWildcard(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Breadcrumbs = _interopRequireDefault(require("../../../Breadcrumbs"));
var _Text = _interopRequireDefault(require("../../../Text"));
var _Heading = _interopRequireDefault(require("../../../Heading"));
var _IconButton = _interopRequireDefault(require("../../../IconButton"));
var _constants = require("./constants");
var _Transition = _interopRequireDefault(require("../../../Transition"));
var _context = require("../../../WixStyleReactEnvironmentProvider/context");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Page/components/Header/Header.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var isDarkTheme = (hasBackgroundImage, minimized, skin) => {
  switch (skin) {
    case 'light':
      return false;
    case 'dark':
      return true;
    default:
      return hasBackgroundImage && !minimized;
  }
};
var getBreadcrumbsTheme = (hasBackgroundImage, minimized, skin) => isDarkTheme(hasBackgroundImage, minimized, skin) ? 'onDarkBackground' : 'onGrayBackground';
var getTitle = (title, minimized) => typeof title === 'function' ? title(minimized) : title;
var generateDefaultBreadcrumbs = (title, hasBackgroundImage, minimized, skin) => /*#__PURE__*/_react.default.createElement(_Breadcrumbs.default, {
  items: [{
    id: '1',
    value: getTitle(title, minimized)
  }],
  activeId: "1",
  size: "medium",
  theme: getBreadcrumbsTheme(hasBackgroundImage, minimized, skin),
  onClick: () => {},
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 53,
    columnNumber: 3
  }
});
var getBreadcrumbs = (breadcrumbs, minimized) => typeof breadcrumbs === 'function' ? breadcrumbs(minimized) : breadcrumbs;
var generateThemedBreadcrumbs = (breadcrumbs, title, hasBackgroundImage, minimized, skin) => {
  if (breadcrumbs) {
    // @ts-expect-error
    return /*#__PURE__*/_react.default.cloneElement(getBreadcrumbs(breadcrumbs, minimized), {
      theme: getBreadcrumbsTheme(hasBackgroundImage, minimized, skin)
    });
  }
  return generateDefaultBreadcrumbs(title, hasBackgroundImage, minimized);
};

/**
 * A header that sticks at the top of the container which minimizes on scroll
 */
class Header extends _react.PureComponent {
  constructor(props) {
    super(props);
    this.context = void 0;
    this._animateComponent = (show, useEnterDelay, content) => {
      if (show) {
        return content;
      }
      return useEnterDelay ? /*#__PURE__*/_react.default.createElement(_Transition.default, {
        show: show,
        enterAnimation: {
          fadeIn: {
            duration: 'medium01',
            delay: 'short'
          }
        },
        exitAnimation: {
          fadeOut: true
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 146,
          columnNumber: 7
        }
      }, content) : /*#__PURE__*/_react.default.createElement(_Transition.default, {
        show: show,
        enterAnimation: {
          fadeIn: true
        },
        exitAnimation: {
          fadeOut: true
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 161,
          columnNumber: 7
        }
      }, content);
    };
    var {
      breadcrumbs,
      title,
      hasBackgroundImage,
      minimized,
      skin
    } = props;
    this.state = {
      themedBreadcrumbs: generateThemedBreadcrumbs(breadcrumbs, title, hasBackgroundImage, minimized, skin)
    };
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    var {
      breadcrumbs,
      title,
      hasBackgroundImage,
      minimized,
      skin
    } = this.props;
    var newBreadcrumbs = nextProps.breadcrumbs;
    var newTitle = nextProps.title;
    var newHasBackgroundImage = nextProps.hasBackgroundImage;
    var newMinimized = nextProps.minimized;
    var newSkin = nextProps.skin;
    if (breadcrumbs !== newBreadcrumbs || title !== newTitle || hasBackgroundImage !== newHasBackgroundImage || minimized !== newMinimized || skin !== newSkin) {
      var themedBreadcrumbs = generateThemedBreadcrumbs(newBreadcrumbs, newTitle, newHasBackgroundImage, newMinimized, skin);
      this.setState({
        themedBreadcrumbs
      });
    }
  }
  render() {
    var {
      dataHook,
      breadcrumbs,
      onBackClicked,
      title,
      subtitle,
      minimized,
      skin,
      actionsBar,
      showBackButton,
      hasBackgroundImage,
      className,
      backButtonAriaLabel
    } = this.props;
    var breadcrumbsExists = !!breadcrumbs;
    var {
      themedBreadcrumbs
    } = this.state;
    var _title = getTitle(title, minimized);
    var isDark = isDarkTheme(hasBackgroundImage, minimized, skin);
    var {
      pageHeaderId
    } = this.context;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _HeaderSt.st)(_HeaderSt.classes.root, {}, className),
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 197,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _HeaderSt.classes.header,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 198,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 199,
        columnNumber: 11
      }
    }, this._animateComponent(breadcrumbsExists || minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _HeaderSt.st)(_HeaderSt.classes.breadcrumbsContainer, {
        withoutBreadcrumbs: !breadcrumbsExists
      }),
      "data-hook": _constants.dataHooks.breadcrumbs,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 203,
        columnNumber: 15
      }
    }, themedBreadcrumbs))), /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _HeaderSt.st)(_HeaderSt.classes.titleContainer, {
        minimized
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 213,
        columnNumber: 11
      }
    }, showBackButton && onBackClicked && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      className: (0, _HeaderSt.st)(_HeaderSt.classes.titleBackButton, {
        darkTheme: isDark
      }),
      dataHook: _constants.dataHooks.backButton,
      onClick: onBackClicked,
      ariaLabel: backButtonAriaLabel,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 219,
        columnNumber: 17
      }
    }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeft, {
      className: _HeaderSt.classes.titleBackButtonIcon,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 227,
        columnNumber: 19
      }
    }))), /*#__PURE__*/_react.default.createElement("div", {
      className: _HeaderSt.classes.titleColumn,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 230,
        columnNumber: 13
      }
    }, title && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement(_Heading.default, {
      size: "extraLarge",
      className: (0, _HeaderSt.st)(_HeaderSt.classes.title),
      dataHook: _constants.dataHooks.title,
      ellipsis: typeof _title === 'string',
      light: isDark,
      id: pageHeaderId,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 235,
        columnNumber: 19
      }
    }, _title)), subtitle && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _constants.dataHooks.subtitle,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 250,
        columnNumber: 19
      }
    }, /*#__PURE__*/_react.default.createElement(_Text.default, {
      ellipsis: typeof subtitle === 'string',
      light: isDark,
      secondary: !isDark,
      maxLines: 2,
      maxWidth: "288px",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 251,
        columnNumber: 21
      }
    }, subtitle)))))), actionsBar && /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _HeaderSt.st)(_HeaderSt.classes.actionsBar, {
        minimized,
        withBreadcrumbs: breadcrumbsExists
      }),
      "data-hook": _constants.dataHooks.actionBar,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 266,
        columnNumber: 11
      }
    }, typeof actionsBar === 'function' ? actionsBar({
      minimized,
      hasBackgroundImage,
      skin
    }) : actionsBar));
  }
}
exports.default = Header;
Header.displayName = 'Page.Header';
Header.defaultProps = {
  minimized: false
};
Header.contextType = _context.WixStyleReactEnvironmentContext;
//# sourceMappingURL=Header.js.map