import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import { type LearningCertificateAlignment } from 'src/pages/dashboard/Learning/Settings/Certificates/types';

import { type CertificateSignatureDisplay } from '../types';

import { COLOR_TYPE } from './constants';
import { getSignaturesStyles } from './shared.styles';
import { type ColorType } from './types';

/** Props for the shared signatures section, reused across all templates. */
type CertificatePreviewSignaturesProps = {
  /** Already-filtered list of signatures with an uploaded image. */
  signatures: CertificateSignatureDisplay[];
  textAlignment: LearningCertificateAlignment;
  /** Color of the line above the signer name. */
  borderColor: string;
  /** Light/dark variant for the name/role text colors. Defaults to light. */
  colorType?: ColorType;
  /** Font size for the signer name. Defaults to '0.8em'. */
  nameFontSize?: string;
  /** Font size for the signer role. Defaults to '0.8em'. */
  roleFontSize?: string;
};

const CertificatePreviewSignatures = ({
  signatures,
  textAlignment,
  borderColor,
  colorType = COLOR_TYPE.light,
  nameFontSize = '0.8em',
  roleFontSize = '0.8em',
}: CertificatePreviewSignaturesProps) => {
  const { palette } = useTheme();

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

  const isDark = colorType === COLOR_TYPE.dark;
  const grey = palette.newBase?.grey;
  const nameColor = isDark ? grey?.[50] : grey?.[950];
  const roleColor = isDark ? grey?.[100] : grey?.[800];

  const styles = getSignaturesStyles({
    textAlignment,
    borderColor,
    nameColor,
    roleColor,
    nameFontSize,
    roleFontSize,
  });

  return (
    <Stack sx={styles.signatures}>
      {signatures.map((sig, i) => (
        <Stack
          key={i}
          sx={styles.signatureItem}
        >
          <Stack
            component="img"
            src={sig.imageUrl}
            alt={sig.primaryText}
            sx={styles.signatureImg}
          />
          {(sig.primaryText || sig.secondaryText) && (
            <Stack sx={styles.signatureLine} />
          )}
          {sig.primaryText && (
            <Stack
              component="p"
              sx={styles.signatureName}
            >
              {sig.primaryText}
            </Stack>
          )}
          {sig.secondaryText && (
            <Stack
              component="p"
              sx={styles.signatureRole}
            >
              {sig.secondaryText}
            </Stack>
          )}
        </Stack>
      ))}
    </Stack>
  );
};

export default CertificatePreviewSignatures;
