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 { COLOR_TYPE } from '../shared/constants';
import { type CertificatePreviewProps } from '../types';

import { getClassicStyles } from './styles';
import { resolveClassicPaint } from './utils';

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

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

  const cornerSvg = (
    <svg
      viewBox="0 0 28 28"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      width="100%"
      height="100%"
    >
      <path
        d="M2 26 L2 2 L26 2"
        stroke={paint.border1}
        strokeWidth="2"
      />
      <path
        d="M6 22 L6 6 L22 6"
        stroke={paint.border3}
        strokeWidth="1"
      />
    </svg>
  );

  return (
    <Stack sx={styles.root}>
      <Stack sx={styles.innerBorder1} />
      <Stack sx={styles.innerBorder2} />
      <Stack sx={styles.cornerTL}>{cornerSvg}</Stack>
      <Stack sx={styles.cornerTR}>{cornerSvg}</Stack>
      <Stack sx={styles.cornerBL}>{cornerSvg}</Stack>
      <Stack sx={styles.cornerBR}>{cornerSvg}</Stack>

      <Stack sx={styles.content}>
        <CertificatePreviewHeader
          logos={activeLogos}
          dividerColor={paint.border2}
          wordmarkInvert={paint.wordmarkInvert}
          sx={styles.header}
        />

        <Stack sx={styles.centerArea}>
          <Stack sx={styles.body}>
            <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.text}
            colorType={
              paint.wordmarkInvert ? COLOR_TYPE.dark : COLOR_TYPE.light
            }
          />
        </Stack>
      </Stack>
    </Stack>
  );
};

export default ClassicTemplate;
