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

import { CERTIFICATE_PREVIEW_ASPECT_RATIO } from '../../../constants';

import {
  ALIGN_TO_JUSTIFY,
  CERTIFICATE_DESIGN_HEIGHT,
  CERTIFICATE_DESIGN_WIDTH,
  CERTIFICATE_LOGO_HEIGHT,
} from './constants';
import { type HeaderStyleArgs, type SignaturesStyleArgs } from './types';

/** Outer container: defines aspect ratio and clips overflow. */
export const canvasContainerSx: SxProps<Theme> = {
  width: '100%',
  aspectRatio: CERTIFICATE_PREVIEW_ASPECT_RATIO,
  overflow: 'hidden',
  position: 'relative',
  borderRadius: 2,
};

/** Inner element: fixed design size scaled with transform. */
export const getCanvasInnerSx = (scale: number): SxProps<Theme> => ({
  position: 'absolute',
  top: 0,
  left: 0,
  width: CERTIFICATE_DESIGN_WIDTH,
  height: CERTIFICATE_DESIGN_HEIGHT,
  transform: `scale(${scale})`,
  transformOrigin: 'top left',
  fontSize: '10px',
});

/** Styles for the shared CertificatePreviewHeader component. */
export const getHeaderStyles = ({
  wordmarkInvert,
  dividerColor,
}: HeaderStyleArgs): Record<string, SxProps<Theme>> => ({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
    mb: '0.8em',
  },
  wordmark: {
    height: '1em',
    width: 'auto',
    objectFit: 'contain',
    filter: wordmarkInvert ? 'brightness(0) invert(1)' : undefined,
  },
  logos: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: '0.8em',
  },
  logoImg: {
    height: CERTIFICATE_LOGO_HEIGHT,
    maxWidth: '8em',
    width: 'auto',
    objectFit: 'contain',
  },
  headerDivider: {
    width: '100%',
    height: '1px',
    backgroundColor: dividerColor,
    mb: '1.2em',
    flexShrink: 0,
  },
});

/** Styles for the shared CertificatePreviewSignatures component. */
export const getSignaturesStyles = ({
  textAlignment,
  borderColor,
  nameColor,
  roleColor,
  nameFontSize,
  roleFontSize,
}: SignaturesStyleArgs): Record<string, SxProps<Theme>> => {
  const justify = ALIGN_TO_JUSTIFY[textAlignment];
  return {
    signatures: {
      flexDirection: 'row',
      justifyContent: justify,
      alignItems: 'flex-start',
      gap: '1em',
      mt: '1.5em',
      width: '100%',
      flexShrink: 0,
    },
    signatureItem: {
      flexDirection: 'column',
      alignItems: 'center',
      flex: '0 0 auto',
      maxWidth: '14em',
    },
    signatureImg: {
      height: '4em',
      maxWidth: '14em',
      width: 'auto',
      objectFit: 'contain',
      mb: '0.3em',
    },
    signatureLine: {
      width: '100%',
      height: '1px',
      backgroundColor: borderColor,
      mb: '0.2em',
      flexShrink: 0,
    },
    signatureName: {
      fontFamily: "'Roboto', sans-serif",
      fontSize: nameFontSize,
      fontWeight: 'fontWeightBold',
      color: nameColor,
      textAlign: 'center',
      width: '100%',
    },
    signatureRole: {
      fontFamily: "'Roboto', sans-serif",
      fontSize: roleFontSize,
      fontWeight: 'fontWeightRegular',
      color: roleColor,
      textAlign: 'center',
      width: '100%',
    },
  };
};
