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

import {
  getActiveLogos,
  getActiveSignatures,
} from 'src/pages/dashboard/Learning/Settings/Certificates/Create/utils';

import CertificatePreviewHeader from '../shared/CertificatePreviewHeader';
import CertificatePreviewSignatures from '../shared/CertificatePreviewSignatures';
import CertificateTokenizedText from '../shared/CertificateTokenizedText';
import { type CertificatePreviewProps } from '../types';

import { getCustomStyles } from './styles';

const CustomTemplate = ({
  recipientName,
  headingTitle,
  subtitle,
  description,
  textAlignment,
  signaturesEnabled,
  signatures,
  logosEnabled,
  logos,
  backgroundImageUrl,
}: CertificatePreviewProps) => {
  const theme = useTheme();
  const styles = getCustomStyles(theme, textAlignment, backgroundImageUrl);

  const activeSignatures = getActiveSignatures(signaturesEnabled, signatures);
  const activeLogos = getActiveLogos(logosEnabled, logos);

  return (
    <Stack sx={styles.root}>
      <Stack sx={styles.content}>
        <CertificatePreviewHeader
          logos={activeLogos}
          sx={styles.header}
        />
        <Stack sx={styles.centerArea}>
          <Stack sx={styles.body}>
            <Stack
              component="h1"
              sx={styles.title}
            >
              {headingTitle}
            </Stack>
            <CertificateTokenizedText
              text={subtitle}
              sx={styles.subtitle}
            />
            {recipientName && (
              <Stack
                component="p"
                sx={styles.recipient}
              >
                {recipientName}
              </Stack>
            )}
            <CertificateTokenizedText
              text={description}
              sx={styles.description}
            />
          </Stack>
          <CertificatePreviewSignatures
            signatures={activeSignatures}
            textAlignment={textAlignment}
            borderColor={theme.palette.new.graphics.brand[300]}
            nameFontSize="1.2em"
            roleFontSize="1.1em"
          />
        </Stack>
      </Stack>
    </Stack>
  );
};

export default CustomTemplate;
