"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PageHeader = PageHeader;
var _react = _interopRequireWildcard(require("react"));
var _helpers = require("../../helpers");
var _components = require("@storybook/components");
var _theming = require("@storybook/theming");
var _ImagePreview = require("./ImagePreview");
var _viewMode = require("../../viewMode");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const Container = _theming.styled.div({
  margin: '24px 44px 0'
});
const ErrorContainer = (0, _theming.withTheme)(_theming.styled.div(_ref => {
  let {
    theme
  } = _ref;
  return {
    marginTop: '8px',
    padding: '8px',
    background: theme.background.negative,
    color: theme.color.negative,
    borderRadius: '2px',
    display: 'flex',
    alignItems: 'baseline',
    '& svg': {
      margin: '0 5px',
      width: 8,
      height: 8
    },
    '& pre': {
      margin: '0 4px',
      padding: 0,
      lineHeight: '22px'
    }
  };
}));
const H1 = _theming.styled.h1({
  margin: 0,
  marginBottom: '8px'
});
const HeaderDivider = (0, _theming.withTheme)(_theming.styled.span(_ref2 => {
  let {
    theme
  } = _ref2;
  return {
    padding: '0 8px',
    color: theme.color.mediumdark
  };
}));
const ImagesEntriesContainer = _theming.styled.div({
  display: 'flex',
  margin: '16px 0 8px'
});
function PageHeader(_ref3) {
  let {
    title,
    images = {},
    errorMessage,
    showViewModes,
    showTitle,
    viewMode,
    imagesWithError = [],
    onImageChange,
    onViewModeChange
  } = _ref3;
  const imageEntires = Object.entries(images);
  const [imageName, setImageName] = (0, _react.useState)((imageEntires[0] ?? [])[0] ?? '');
  const handleImageChange = name => (setImageName(name), onImageChange(name));
  const handleViewModeChange = mode => onViewModeChange(mode);
  const error = errorMessage || imagesWithError.includes(imageName) ? images[imageName]?.error || errorMessage : null;
  return showTitle || error || imageEntires.length > 1 || showViewModes ? /*#__PURE__*/_react.default.createElement(Container, null, showTitle && /*#__PURE__*/_react.default.createElement(H1, null, title.flatMap(token => [token, /*#__PURE__*/_react.default.createElement(HeaderDivider, {
    key: token
  }, "/")]).slice(0, -1)), error && /*#__PURE__*/_react.default.createElement(ErrorContainer, null, /*#__PURE__*/_react.default.createElement(_components.Icons, {
    icon: "closeAlt"
  }), /*#__PURE__*/_react.default.createElement("pre", null, error)), imageEntires.length > 1 ? /*#__PURE__*/_react.default.createElement(ImagesEntriesContainer, null, imageEntires.map(_ref4 => {
    let [name, image] = _ref4;
    return /*#__PURE__*/_react.default.createElement(_ImagePreview.ImagePreview, {
      key: name,
      imageName: name,
      url: `${(0, _helpers.getImageUrl)(title, name)}/${image.actual}`,
      isActive: name === imageName,
      onClick: handleImageChange,
      error: imagesWithError.includes(name)
    });
  })) : null, showViewModes && /*#__PURE__*/_react.default.createElement(_components.Tabs, {
    selected: viewMode,
    actions: {
      onSelect: handleViewModeChange
    }
  }, _viewMode.viewModes.map(x => /*#__PURE__*/_react.default.createElement("div", {
    key: x,
    id: x,
    title: x
  })))) : null;
}