import { useId } from 'react';
import PropTypes from 'prop-types';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import CollapsibleSection from '../containers/CollapsibleSection';
import SanitizedHtml from '../containers/SanitizedHtml';
import LabelValueMetadata from '../containers/LabelValueMetadata';
import { PluginHook } from './PluginHook';

/**
 * ManifestInfo
 */
export function ManifestInfo({
  manifestDescription = null,
  manifestLabel = null,
  manifestMetadata = [],
  manifestSummary = null,
  ...rest
}) {
  const { t } = useTranslation();
  const id = useId();
  const pluginProps = {
    manifestDescription,
    manifestLabel,
    manifestMetadata,
    manifestSummary,
    ...rest,
  };

  return (
    <CollapsibleSection id={`${id}-resource`} label={t('resource')}>
      {manifestLabel && (
        <Typography
          aria-labelledby={`${id}-resource ${id}-resource-heading`}
          id={`${id}-resource-heading`}
          variant="h4"
          component="h5"
        >
          {manifestLabel}
        </Typography>
      )}

      {manifestDescription && (
        <Typography variant="body1">
          <SanitizedHtml htmlString={manifestDescription} ruleSet="iiif" />
        </Typography>
      )}

      {manifestSummary && (
        <Typography variant="body1">
          <SanitizedHtml htmlString={manifestSummary} ruleSet="iiif" />
        </Typography>
      )}

      {manifestMetadata.length > 0 && <LabelValueMetadata labelValuePairs={manifestMetadata} />}

      <PluginHook targetName="ManifestInfo" {...pluginProps} />
    </CollapsibleSection>
  );
}

ManifestInfo.propTypes = {
  manifestDescription: PropTypes.string,
  manifestLabel: PropTypes.string,
  manifestMetadata: PropTypes.array,
  manifestSummary: PropTypes.string,
};