import { useId } from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import CollapsibleSection from '../containers/CollapsibleSection';
import ns from '../config/css-ns';
import { PluginHook } from './PluginHook';

const StyledDl = styled('dl')(({ theme }) => ({
  '& dd': {
    marginBottom: '.5em',
    marginLeft: '0',
  },
}));

/**
 * ManifestRelatedLinks
 */
export function ManifestRelatedLinks({
  homepage = null,
  manifestUrl = null,
  related = null,
  renderings = null,
  seeAlso = null,
  ...rest
}) {
  const { t } = useTranslation();
  const id = useId();
  const titleId = useId();

  const pluginProps = {
    homepage,
    manifestUrl,
    related,
    renderings,
    seeAlso,
    t,
    ...rest,
  };

  return (
    <CollapsibleSection aria-labelledby={titleId} id={id} label={t('related')}>
      <Typography aria-labelledby={`${id} ${titleId}`} id={titleId} variant="h4" component="h5">
        {t('links')}
      </Typography>
      <StyledDl className={classNames(ns('label-value-metadata'))}>
        {homepage && (
          <>
            <Typography variant="subtitle2" component="dt">
              {t('iiif_homepage')}
            </Typography>
            {homepage.map((page) => (
              <Typography key={page.value} variant="body1" component="dd">
                <Link target="_blank" rel="noopener noreferrer" href={page.value}>
                  {page.label || page.value}
                </Link>
              </Typography>
            ))}
          </>
        )}
        {renderings && renderings.length > 0 && (
          <>
            <Typography variant="subtitle2" component="dt">
              {t('iiif_renderings')}
            </Typography>
            {renderings.map((rendering) => (
              <Typography key={rendering.value} variant="body1" component="dd">
                <Link target="_blank" rel="noopener noreferrer" href={rendering.value}>
                  {rendering.label || rendering.value}
                </Link>
              </Typography>
            ))}
          </>
        )}
        {related && (
          <>
            <Typography variant="subtitle2" component="dt">
              {t('iiif_related')}
            </Typography>
            {related.map((relatedItem) => (
              <Typography key={relatedItem.value} variant="body1" component="dd">
                <Link target="_blank" rel="noopener noreferrer" href={relatedItem.value}>
                  {relatedItem.label || relatedItem.value}
                </Link>
                {relatedItem.format && <Typography component="span">{` (${relatedItem.format})`}</Typography>}
              </Typography>
            ))}
          </>
        )}
        {seeAlso && (
          <>
            <Typography variant="subtitle2" component="dt">
              {t('iiif_seeAlso')}
            </Typography>
            {seeAlso.map((seeAlsoItem) => (
              <Typography key={seeAlsoItem.value} variant="body1" component="dd">
                <Link target="_blank" rel="noopener noreferrer" href={seeAlsoItem.value}>
                  {seeAlsoItem.label || seeAlsoItem.value}
                </Link>
                {seeAlsoItem.format && <Typography component="span">{` (${seeAlsoItem.format})`}</Typography>}
              </Typography>
            ))}
          </>
        )}
        {manifestUrl && (
          <>
            <Typography variant="subtitle2" component="dt">
              {t('iiif_manifest')}
            </Typography>
            <Typography variant="body1" component="dd">
              <Link target="_blank" rel="noopener noreferrer" href={manifestUrl}>
                {manifestUrl}
              </Link>
            </Typography>
          </>
        )}
      </StyledDl>
      <PluginHook targetName="ManifestRelatedLinks" {...pluginProps} />
    </CollapsibleSection>
  );
}

ManifestRelatedLinks.propTypes = {
  homepage: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      value: PropTypes.string,
    }),
  ),
  manifestUrl: PropTypes.string,
  related: PropTypes.arrayOf(
    PropTypes.shape({
      format: PropTypes.string,
      label: PropTypes.string,
      value: PropTypes.string,
    }),
  ),
  renderings: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      value: PropTypes.string,
    }),
  ),
  seeAlso: PropTypes.arrayOf(
    PropTypes.shape({
      format: PropTypes.string,
      label: PropTypes.string,
      value: PropTypes.string,
    }),
  ),
};