import { type CSSProperties, type FC, type JSX } from 'react';
import classnames from 'classnames';
import css from 'styled-jsx/css';

import { useI18n } from '~/src/lib/i18n';
import Box from '../Box';
import Clickable from '../Clickable';
import CrossIcon from '../Icon/CrossIcon';
import Text from '../Text';

export enum NotificationType {
  SUCCESS = 'success',
  WARNING = 'warning',
  ERROR = 'error',
  INFO = 'info',
}

export interface NotificationProps {
  testId?: string;
  type: NotificationType;
  content: string | JSX.Element;
  onDismiss?(): void;
  textSize?: string;
  style?: CSSProperties;
}

const BACKGROUND_BY_TYPE: Record<NotificationType, string> = {
  [NotificationType.SUCCESS]: '#00aa4e',
  [NotificationType.WARNING]: '#d99959',
  [NotificationType.ERROR]: '#d95959',
  [NotificationType.INFO]: '#5782d9',
};

const BORDER_RADIUS = '0.5rem';

const styles = css.resolve`
  .dismissButton:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
`;

const Notification: FC<NotificationProps> = ({
  testId,
  type,
  content,
  onDismiss,
  textSize = '1.6rem',
  style,
}) => {
  const { t } = useI18n('app');

  const renderContent = () => {
    if (typeof content === 'string') {
      return <Text color="#fff">{content}</Text>;
    }

    return content;
  };

  return (
    <Box
      data-testid={testId}
      flexRow
      style={{ borderRadius: BORDER_RADIUS, ...style }}
    >
      <Box
        width="0.8rem"
        style={{
          borderRadius: `${BORDER_RADIUS} 0 0 ${BORDER_RADIUS}`,
          background: BACKGROUND_BY_TYPE[type],
        }}
      />
      <Box
        flexRow
        flexGrow
        alignCenter
        padding=".8em 1em"
        style={{
          gap: '1.6em',
          backgroundColor: '#151515',
          borderRadius: `0 ${BORDER_RADIUS} ${BORDER_RADIUS} 0`,
          border: '1px solid #444',
          borderLeft: 0,
        }}
      >
        <Box flexGrow style={{ fontSize: textSize }}>
          {renderContent()}
        </Box>
        {onDismiss && (
          <Clickable
            className={classnames(styles.className, 'dismissButton')}
            flexBox
            centerContent
            noFlexShrink
            isInline
            title={t('actions.close')}
            width="2.4rem"
            height="2.4rem"
            onClick={onDismiss}
            style={{ borderRadius: '50%', transition: 'background-color 0.2s' }}
          >
            <CrossIcon width="1.6rem" height="1.6rem" color="#888" />
          </Clickable>
        )}
      </Box>
      {styles.styles}
    </Box>
  );
};

export default Notification;