import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import CompanionWindow from '../containers/CompanionWindow';
import { CompanionWindowSection } from './CompanionWindowSection';
import CanvasInfo from '../containers/CanvasInfo';
import LocalePicker from '../containers/LocalePicker';
import ManifestInfo from '../containers/ManifestInfo';
import CollectionInfo from '../containers/CollectionInfo';
import ManifestRelatedLinks from '../containers/ManifestRelatedLinks';
import ns from '../config/css-ns';

/**
 * WindowSideBarInfoPanel
 */
export function WindowSideBarInfoPanel({
  windowId,
  id,
  canvasIds = [],
  collectionPath = [],
  locale = '',
  setLocale = undefined,
  availableLocales = [],
  showLocalePicker = false,
}) {
  const { t } = useTranslation();
  return (
    <CompanionWindow
      title={t('aboutThisItem')}
      paperClassName={ns('window-sidebar-info-panel')}
      windowId={windowId}
      id={id}
      titleControls={(
        showLocalePicker
          && (
          <LocalePicker
            locale={locale}
            setLocale={setLocale}
            availableLocales={availableLocales}
          />
          )
      )}
    >
      {
        canvasIds.map((canvasId, index) => (
          <CompanionWindowSection
            key={canvasId}
          >
            <CanvasInfo
              canvasId={canvasId}
              companionWindowId={id}
              index={index}
              totalSize={canvasIds.length}
              windowId={windowId}
            />
          </CompanionWindowSection>
        ))
      }
      { collectionPath.length > 0 && (
        <CompanionWindowSection>
          <CollectionInfo companionWindowId={id} windowId={windowId} />
        </CompanionWindowSection>
      )}

      <CompanionWindowSection>
        <ManifestInfo companionWindowId={id} windowId={windowId} />
      </CompanionWindowSection>

      <CompanionWindowSection>
        <ManifestRelatedLinks companionWindowId={id} windowId={windowId} />
      </CompanionWindowSection>
    </CompanionWindow>
  );
}

WindowSideBarInfoPanel.propTypes = {
  availableLocales: PropTypes.arrayOf(PropTypes.string),
  canvasIds: PropTypes.arrayOf(PropTypes.string),
  collectionPath: PropTypes.arrayOf(PropTypes.string),
  id: PropTypes.string.isRequired,
  locale: PropTypes.string,
  setLocale: PropTypes.func,
  showLocalePicker: PropTypes.bool,
  windowId: PropTypes.string.isRequired,
};