import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useRef } from 'react';
import { hideControlsClassName } from '@atlaskit/media-ui';
import { ItemViewer } from './item-viewer';
import { HeaderWrapper, ListWrapper } from './styleWrappers';
import { Navigation } from './navigation';
import { getRandomTelemetryId } from '@atlaskit/media-common';
import Header from './header';
export var List = function List(_ref) {
  var defaultSelectedItem = _ref.defaultSelectedItem,
    onClose = _ref.onClose,
    showControls = _ref.showControls,
    extensions = _ref.extensions,
    onSidebarButtonClick = _ref.onSidebarButtonClick,
    contextId = _ref.contextId,
    featureFlags = _ref.featureFlags,
    isSidebarVisible = _ref.isSidebarVisible,
    onNavigationChange = _ref.onNavigationChange,
    items = _ref.items,
    viewerOptions = _ref.viewerOptions;
  var _useState = useState(defaultSelectedItem),
    _useState2 = _slicedToArray(_useState, 2),
    selectedItem = _useState2[0],
    setSelectedItem = _useState2[1];
  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    previewCount = _useState4[0],
    setPreviewCount = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    isArchiveSideBarVisible = _useState6[0],
    setIsArchiveSideBarVisible = _useState6[1];
  var traceContext = useRef({
    traceId: getRandomTelemetryId()
  });
  return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(HeaderWrapper
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
  , {
    className: hideControlsClassName,
    isArchiveSideBarVisible: isArchiveSideBarVisible
  }, /*#__PURE__*/React.createElement(Header, {
    identifier: selectedItem,
    onClose: onClose,
    extensions: extensions,
    onSidebarButtonClick: onSidebarButtonClick,
    isSidebarVisible: isSidebarVisible,
    isArchiveSideBarVisible: isArchiveSideBarVisible,
    featureFlags: featureFlags,
    onSetArchiveSideBarVisible: setIsArchiveSideBarVisible,
    traceContext: traceContext.current
  })), /*#__PURE__*/React.createElement(ItemViewer, {
    identifier: selectedItem,
    showControls: showControls,
    onClose: onClose,
    previewCount: previewCount,
    contextId: contextId,
    featureFlags: featureFlags,
    viewerOptions: viewerOptions,
    traceContext: traceContext.current
  }), /*#__PURE__*/React.createElement(Navigation, {
    items: items,
    selectedItem: selectedItem,
    onChange: function onChange(selectedItem) {
      onNavigationChange === null || onNavigationChange === void 0 || onNavigationChange(selectedItem);
      showControls === null || showControls === void 0 || showControls();
      setSelectedItem(selectedItem);
      setPreviewCount(previewCount + 1);
    },
    isArchiveSideBarVisible: isArchiveSideBarVisible
  }));
};