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

import { ALIGN_TO_JUSTIFY, CERTIFICATE_LOGO_HEIGHT } from '../shared/constants';

import { type ClassicPaint, type ClassicStyles } from './types';

export type { ClassicStyles };

export const getClassicStyles = (
  paint: ClassicPaint,
  textAlignment: LearningCertificateAlignment,
): ClassicStyles => {
  const justify = ALIGN_TO_JUSTIFY[textAlignment];
  return {
    root: {
      width: '100%',
      height: '100%',
      backgroundColor: paint.bg,
      position: 'relative',
      padding: '3.6em 3.6em 3.6em',
      fontFamily: "'Roboto', sans-serif",
      overflow: 'hidden',
    },
    innerBorder1: {
      position: 'absolute',
      top: '2.4em',
      right: '2.4em',
      bottom: '2.4em',
      left: '2.4em',
      border: `2px solid ${paint.border1}`,
      pointerEvents: 'none',
      zIndex: 0,
    },
    innerBorder2: {
      position: 'absolute',
      top: '2.8em',
      right: '2.8em',
      bottom: '2.8em',
      left: '2.8em',
      border: `1px solid ${paint.border1}`,
      pointerEvents: 'none',
      zIndex: 0,
    },
    cornerTL: {
      position: 'absolute',
      width: '2.8em',
      height: '2.8em',
      top: '1.2em',
      left: '1.2em',
      pointerEvents: 'none',
      zIndex: 1,
    },
    cornerTR: {
      position: 'absolute',
      width: '2.8em',
      height: '2.8em',
      top: '1.2em',
      right: '1.2em',
      pointerEvents: 'none',
      zIndex: 1,
      transform: 'scaleX(-1)',
    },
    cornerBL: {
      position: 'absolute',
      width: '2.8em',
      height: '2.8em',
      bottom: '1.2em',
      left: '1.2em',
      pointerEvents: 'none',
      zIndex: 1,
      transform: 'scaleY(-1)',
    },
    cornerBR: {
      position: 'absolute',
      width: '2.8em',
      height: '2.8em',
      bottom: '1.2em',
      right: '1.2em',
      pointerEvents: 'none',
      zIndex: 1,
      transform: 'scale(-1)',
    },
    content: {
      position: 'relative',
      zIndex: 1,
      height: '100%',
      flexDirection: 'column',
      alignItems: 'center',
      overflow: 'hidden',
    },
    header: {
      minHeight: CERTIFICATE_LOGO_HEIGHT,
      flexShrink: 0,
    },
    centerArea: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'flex-start',
      width: '100%',
      overflow: 'hidden',
      minHeight: 0,
    },
    body: {
      flexDirection: 'column',
      alignItems: justify,
      width: '100%',
      textAlign: textAlignment,
    },
    title: {
      fontFamily: "'Playfair Display', Georgia, serif",
      fontWeight: 'fontWeightBold',
      fontStyle: 'italic',
      fontSize: '1.77em',
      lineHeight: 1.65,
      letterSpacing: '0.025em',
      color: paint.text,
      mb: '0.45em',
      width: '100%',
    },
    diamondRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: justify,
      gap: '1em',
      mb: '0.6em',
      width: '100%',
    },
    diamondLine: {
      flex: '0 0 8em',
      height: '1px',
      backgroundColor: paint.border2,
      flexShrink: 0,
    },
    diamond: {
      width: '0.6em',
      height: '0.6em',
      backgroundColor: paint.border3,
      transform: 'rotate(45deg)',
      flexShrink: 0,
    },
    subtitle: {
      fontFamily: "'Roboto', sans-serif",
      fontWeight: 'fontWeightRegular',
      fontStyle: 'normal',
      fontSize: '0.8em',
      lineHeight: 1.96,
      color: paint.bodyText,
      mb: '0.6em',
      maxWidth: '60em',
      width: '100%',
      display: 'block',
      whiteSpace: 'pre-wrap',
    },
    recipient: {
      fontFamily: "'Playfair Display', Georgia, serif",
      fontWeight: 'fontWeightSemiBold',
      fontStyle: 'italic',
      fontSize: '1.77em',
      lineHeight: 2.06,
      letterSpacing: '0.033em',
      color: paint.text,
      mb: '0.6em',
      width: '100%',
    },
    description: {
      fontFamily: "'Roboto', sans-serif",
      fontWeight: 'fontWeightRegular',
      fontStyle: 'normal',
      fontSize: '0.8em',
      lineHeight: 1.96,
      color: paint.bodyText,
      maxWidth: '60em',
      width: '100%',
      display: 'block',
      whiteSpace: 'pre-wrap',
    },
  };
};
