import React, { useState, useEffect } from 'react';
import { ImagesView } from './ImagesView/ImagesView';
import { PageHeader } from './PageHeader/PageHeader';
import { PageFooter } from './PageFooter/PageFooter';
import { getImageUrl } from '../helpers';
import { styled, withTheme } from '@storybook/theming';
import { Placeholder, ScrollArea } from '@storybook/components';
import { getViewMode, VIEW_MODE_KEY } from '../viewMode';
const Wrapper = styled.div({
  width: '100%',
  height: '100%',
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'column'
});
const ImagesViewContainer = styled.div(_ref => {
  let {
    theme
  } = _ref;
  return {
    background: theme.base == 'light' ? theme.color.mediumlight : theme.color.darker,
    flexGrow: 1,
    padding: '20px 0'
  };
});
const HeaderContainer = styled.div({
  position: 'sticky',
  top: 0,
  zIndex: 1
});
const BodyContainer = styled.div({
  flexGrow: 1,
  minHeight: 0
});
const FooterContainer = styled.div({
  position: 'sticky',
  bottom: 0,
  zIndex: 1
});
const Container = styled.div(_ref2 => {
  let {
    height = '100vh'
  } = _ref2;
  return {
    height,
    width: '100%',
    overflowY: 'hidden',
    display: 'flex',
    flexDirection: 'column'
  };
});
export function ResultsPageInternal(_ref3) {
  let {
    id,
    path,
    results = [],
    approved = {},
    theme,
    onImageApprove,
    showTitle = false,
    height
  } = _ref3;
  const [retry, setRetry] = useState(results.length);
  const result = results[retry - 1] ?? {};
  const [imageName, setImageName] = useState(Object.keys(result.images ?? {})[0] ?? '');
  const [viewMode, setViewMode] = useState(getViewMode());
  useEffect(() => setRetry(results.length), [results.length]);
  const url = getImageUrl(path, imageName);
  const image = result.images?.[imageName];
  const canApprove = Boolean(image && approved[imageName] != retry - 1 && result.status != 'success');
  const hasDiffAndExpect = canApprove && Boolean(image?.diff && image.expect);
  const imagesWithError = result.images ? Object.keys(result.images).filter(imageName => result.status != 'success' && approved[imageName] != retry - 1 && (result.images || {})[imageName]?.error != null) : [];
  const handleApprove = () => onImageApprove(id, retry - 1, imageName);
  const handleChangeViewMode = mode => {
    localStorage.setItem(VIEW_MODE_KEY, mode);
    setViewMode(mode);
  };
  return /*#__PURE__*/React.createElement(Container, {
    height: height
  }, /*#__PURE__*/React.createElement(HeaderContainer, null, /*#__PURE__*/React.createElement(PageHeader, {
    title: path,
    images: result.images,
    errorMessage: result.error,
    showViewModes: hasDiffAndExpect,
    viewMode: viewMode,
    onViewModeChange: handleChangeViewMode,
    onImageChange: setImageName,
    showTitle: showTitle,
    imagesWithError: imagesWithError
  })), /*#__PURE__*/React.createElement(BodyContainer, null, /*#__PURE__*/React.createElement(ScrollArea, {
    vertical: true
  }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ImagesViewContainer, {
    theme: theme
  }, image ? /*#__PURE__*/React.createElement(ImagesView, {
    url: url,
    image: image,
    canApprove: canApprove,
    mode: viewMode
  }) : /*#__PURE__*/React.createElement(Placeholder, null, `Image ${imageName} not found`))))), results.length ? /*#__PURE__*/React.createElement(FooterContainer, null, /*#__PURE__*/React.createElement(PageFooter, {
    canApprove: canApprove,
    retry: retry,
    retriesCount: results.length,
    onRetryChange: setRetry,
    onApprove: handleApprove
  })) : null);
}
export const ResultsPage = withTheme(ResultsPageInternal);