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 ModernPaint, type ModernStyles } from './types';

export type { ModernStyles };

export const getModernStyles = (
  paint: ModernPaint,
  textAlignment: LearningCertificateAlignment,
  theme: Theme,
): ModernStyles => {
  const justify = ALIGN_TO_JUSTIFY[textAlignment];
  return {
    root: {
      width: '100%',
      height: '100%',
      flexDirection: 'row',
      backgroundColor: theme.palette.newBase?.white,
      overflow: 'hidden',
      fontFamily: "'Roboto', sans-serif",
    },
    sidebar: {
      width: '1em',
      flexShrink: 0,
      background: `linear-gradient(180deg, ${paint.gradientTop} 0%, ${paint.gradientBottom} 100%)`,
    },
    body: {
      flex: 1,
      minWidth: 0,
      flexDirection: 'column',
      padding: '2.2em 2.8em 1.8em',
      overflow: 'hidden',
    },
    centerArea: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'flex-start',
      overflow: 'hidden',
      minHeight: 0,
    },
    content: {
      flexDirection: 'column',
      alignItems: justify,
      textAlign: textAlignment,
    },
    title: {
      fontFamily: "'Inter', sans-serif",
      fontWeight: 'fontWeightBold',
      fontStyle: 'italic',
      fontSize: '1.77em',
      lineHeight: 1.65,
      letterSpacing: '0.025em',
      color: paint.titleColor,
      mb: '0.6em',
      width: '100%',
    },
    diamondRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: justify,
      gap: '1em',
      mb: '0.8em',
      width: '100%',
    },
    diamondLine: {
      flex: '0 0 4em',
      height: '1px',
      backgroundColor: paint.accentColor,
      flexShrink: 0,
    },
    diamond: {
      width: '0.6em',
      height: '0.6em',
      backgroundColor: paint.accentColor,
      transform: 'rotate(45deg)',
      flexShrink: 0,
    },
    subtitle: {
      fontFamily: "'Roboto', sans-serif",
      fontWeight: 'fontWeightRegular',
      fontStyle: 'normal',
      fontSize: '0.693em',
      lineHeight: 2.27,
      color: paint.subtitle,
      mb: '0.8em',
      maxWidth: '60em',
      width: '100%',
      display: 'block',
      whiteSpace: 'pre-wrap',
    },
    recipient: {
      fontFamily: "'Inter', sans-serif",
      fontWeight: 'fontWeightBold',
      fontStyle: 'normal',
      fontSize: '2.54em',
      lineHeight: 1.43,
      letterSpacing: '0.033em',
      color: paint.titleColor,
      mb: '0.8em',
      width: '100%',
    },
    description: {
      fontFamily: "'Roboto', sans-serif",
      fontWeight: 'fontWeightRegular',
      fontStyle: 'normal',
      fontSize: '0.693em',
      lineHeight: 2.27,
      color: paint.description,
      maxWidth: '60em',
      width: '100%',
      display: 'block',
      whiteSpace: 'pre-wrap',
    },
  };
};
