import { useId } from 'react';
import PropTypes from 'prop-types';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import ViewListIcon from '@mui/icons-material/ViewListSharp';
import { useTranslation } from 'react-i18next';
import CollapsibleSection from '../containers/CollapsibleSection';

/**
 * CollectionInfo
 */
export function CollectionInfo({
  collectionLabel = null, collectionPath = [], showCollectionDialog, windowId = null,
}) {
  const { t } = useTranslation();
  const id = useId();
  const titleId = useId();

  /**
   * Show the containing collection.
   */
  const openCollectionDialog = () => {
    const manifestId = collectionPath[collectionPath.length - 1];

    showCollectionDialog(manifestId, collectionPath.slice(0, -1), windowId);
  };

  if (collectionPath.length === 0) return null;

  return (
    <CollapsibleSection
      id={id}
      label={t('collection')}
    >
      {collectionLabel && (
        <Typography
          aria-labelledby={`${id} ${titleId}`}
          id={titleId}
          variant="h4"
        >
          {collectionLabel}
        </Typography>
      )}

      <Button
        color="primary"
        onClick={openCollectionDialog}
        startIcon={<ViewListIcon />}
      >
        {t('showCollection')}
      </Button>
    </CollapsibleSection>
  );
}

CollectionInfo.propTypes = {
  collectionLabel: PropTypes.string,
  collectionPath: PropTypes.arrayOf(PropTypes.string),
  showCollectionDialog: PropTypes.func.isRequired,
  windowId: PropTypes.string,
};