import React, { useState } from 'react';
import { getImageUrl } from '../../helpers';
import { Icons, Tabs } from '@storybook/components';
import { styled, withTheme } from '@storybook/theming';
import { ImagePreview } from './ImagePreview';
import { viewModes } from '../../viewMode';
const Container = styled.div({
  margin: '24px 44px 0'
});
const ErrorContainer = withTheme(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 = styled.h1({
  margin: 0,
  marginBottom: '8px'
});
const HeaderDivider = withTheme(styled.span(_ref2 => {
  let {
    theme
  } = _ref2;
  return {
    padding: '0 8px',
    color: theme.color.mediumdark
  };
}));
const ImagesEntriesContainer = styled.div({
  display: 'flex',
  margin: '16px 0 8px'
});
export function PageHeader(_ref3) {
  let {
    title,
    images = {},
    errorMessage,
    showViewModes,
    showTitle,
    viewMode,
    imagesWithError = [],
    onImageChange,
    onViewModeChange
  } = _ref3;
  const imageEntires = Object.entries(images);
  const [imageName, setImageName] = 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.createElement(Container, null, showTitle && /*#__PURE__*/React.createElement(H1, null, title.flatMap(token => [token, /*#__PURE__*/React.createElement(HeaderDivider, {
    key: token
  }, "/")]).slice(0, -1)), error && /*#__PURE__*/React.createElement(ErrorContainer, null, /*#__PURE__*/React.createElement(Icons, {
    icon: "closeAlt"
  }), /*#__PURE__*/React.createElement("pre", null, error)), imageEntires.length > 1 ? /*#__PURE__*/React.createElement(ImagesEntriesContainer, null, imageEntires.map(_ref4 => {
    let [name, image] = _ref4;
    return /*#__PURE__*/React.createElement(ImagePreview, {
      key: name,
      imageName: name,
      url: `${getImageUrl(title, name)}/${image.actual}`,
      isActive: name === imageName,
      onClick: handleImageChange,
      error: imagesWithError.includes(name)
    });
  })) : null, showViewModes && /*#__PURE__*/React.createElement(Tabs, {
    selected: viewMode,
    actions: {
      onSelect: handleViewModeChange
    }
  }, viewModes.map(x => /*#__PURE__*/React.createElement("div", {
    key: x,
    id: x,
    title: x
  })))) : null;
}