import { type Theme } from '@material-hu/mui/styles';

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

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

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

export type { CustomStyles };

export const getCustomStyles = (
  theme: Theme,
  textAlignment: LearningCertificateAlignment,
  backgroundImageUrl: string | undefined,
): CustomStyles => {
  const textPrimary = theme.palette.newBase?.grey[950];
  const textSecondary = theme.palette.newBase?.grey[800];
  const justify = ALIGN_TO_JUSTIFY[textAlignment];

  return {
    root: {
      width: '100%',
      height: '100%',
      position: 'relative',
      overflow: 'hidden',
      backgroundColor: theme.palette.newBase?.white,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundImage: backgroundImageUrl
        ? `url(${backgroundImageUrl})`
        : undefined,
      fontFamily: "'Roboto', sans-serif",
    },
    content: {
      position: 'relative',
      zIndex: 1,
      height: '100%',
      flexDirection: 'column',
      overflow: 'hidden',
    },
    header: {
      padding: '1.6em 3.4em 0',
    },
    centerArea: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'flex-start',
      padding: '0 3.4em 1.8em',
      overflow: 'hidden',
      minHeight: 0,
    },
    body: {
      flexDirection: 'column',
      alignItems: justify,
      width: '100%',
      textAlign: textAlignment,
    },
    title: {
      fontFamily: "'Roboto', sans-serif",
      fontWeight: 'fontWeightSemiBold',
      fontStyle: 'normal',
      fontSize: '2.2em',
      lineHeight: 1.36,
      color: textPrimary,
      mb: '0.5em',
      width: '100%',
    },
    subtitle: {
      fontFamily: "'Roboto', sans-serif",
      fontWeight: 'fontWeightRegular',
      fontStyle: 'normal',
      fontSize: '1.2em',
      lineHeight: 1.5,
      color: textSecondary,
      mb: '0.8em',
      maxWidth: '60em',
      width: '100%',
      display: 'block',
      whiteSpace: 'pre-wrap',
    },
    recipient: {
      fontFamily: "'Inter', sans-serif",
      fontWeight: 'fontWeightBold',
      fontStyle: 'normal',
      fontSize: '1.8em',
      lineHeight: 1.4,
      color: textPrimary,
      mb: '0.8em',
      width: '100%',
    },
    description: {
      fontFamily: "'Roboto', sans-serif",
      fontWeight: 'fontWeightRegular',
      fontStyle: 'normal',
      fontSize: '1.2em',
      lineHeight: 1.5,
      color: textPrimary,
      maxWidth: '60em',
      width: '100%',
      display: 'block',
      whiteSpace: 'pre-wrap',
    },
  };
};
