import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import Skeleton from '@mui/material/Skeleton';
import { useTranslation } from 'react-i18next';
import { Img } from 'react-image';
import CompanionWindow from '../containers/CompanionWindow';
import { CompanionWindowSection } from './CompanionWindowSection';
import LabelValueMetadata from '../containers/LabelValueMetadata';
import ns from '../config/css-ns';
import { PluginHook } from './PluginHook';

const StyledLogo = styled(Img)(() => ({
  maxWidth: '100%',
}));

const StyledPlaceholder = styled(Skeleton)(({ theme }) => ({
  backgroundColor: theme.palette.grey[300],
}));

/**
 * WindowSideBarInfoPanel
 */
export function AttributionPanel({ manifestLogo = null, requiredStatement = null, rights = null, windowId, id }) {
  const { t } = useTranslation();

  // eslint-disable-next-line prefer-rest-params
  const pluginProps = arguments[0];

  return (
    <CompanionWindow title={t('attributionTitle')} paperClassName={ns('attribution-panel')} windowId={windowId} id={id}>
      <CompanionWindowSection>
        {requiredStatement && <LabelValueMetadata labelValuePairs={requiredStatement} defaultLabel={t('attribution')} />}
        {rights && rights.length > 0 && (
          <dl className={ns('label-value-metadata')}>
            <Typography variant="subtitle2" component="dt">
              {t('rights')}
            </Typography>
            {rights.map((v) => (
              <Typography variant="body1" component="dd" key={v.toString()}>
                <Link target="_blank" rel="noopener noreferrer" href={v}>
                  {v}
                </Link>
              </Typography>
            ))}
          </dl>
        )}
      </CompanionWindowSection>

      {manifestLogo && (
        <CompanionWindowSection>
          <StyledLogo
            src={[manifestLogo]}
            alt=""
            role="presentation"
            unloader={<StyledPlaceholder variant="rectangular" height={60} width={60} />}
          />
        </CompanionWindowSection>
      )}

      <PluginHook targetName="AttributionPanel" {...pluginProps} />
    </CompanionWindow>
  );
}

AttributionPanel.propTypes = {
  id: PropTypes.string.isRequired,
  manifestLogo: PropTypes.string,
  requiredStatement: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      value: PropTypes.string,
    }),
  ),
  rights: PropTypes.arrayOf(PropTypes.string),
  windowId: PropTypes.string.isRequired,
};