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 { getModernStyles } from './styles';
import { resolveModernPaint } from './utils';

const ModernTemplate = ({
  accentColor,
  accentHex,
  recipientName,
  headingTitle,
  subtitle,
  description,
  textAlignment,
  signaturesEnabled,
  signatures,
  logosEnabled,
  logos,
}: CertificatePreviewProps) => {
  const theme = useTheme();
  const paint = resolveModernPaint(accentColor, accentHex, theme);
  const styles = getModernStyles(paint, textAlignment, theme);

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

  return (
    <Stack sx={styles.root}>
      <Stack sx={styles.sidebar} />

      <Stack sx={styles.body}>
        <CertificatePreviewHeader
          logos={activeLogos}
          dividerColor={paint.headerDivider}
        />

        <Stack sx={styles.centerArea}>
          <Stack sx={styles.content}>
            <Stack
              component="h1"
              sx={styles.title}
            >
              {headingTitle}
            </Stack>

            <Stack sx={styles.diamondRow}>
              <Stack sx={styles.diamondLine} />
              <Stack sx={styles.diamond} />
              <Stack sx={styles.diamondLine} />
            </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={paint.accentColor}
            nameFontSize="0.693em"
            roleFontSize="0.693em"
          />
        </Stack>
      </Stack>
    </Stack>
  );
};

export default ModernTemplate;
