import React from 'react';

import { bem } from 'utils/bem';
import { TYPOGRAPHY_TYPE, Typography } from 'components/Typography';
import { BUTTON_SIZE, BUTTON_TYPE, Button } from 'components/Button';

import { ALERT_SIZE, AlertProps } from './types';
import { THEME } from '../../constants'; // TODO: Finish config Rollup to work properly with absolute path DEC-10606
import { ALERT_ICONS_BY_TYPES, ALERT_ACTION_SIZES_BY_SIZES } from './constants';

import styles from './alert.scss';

export const alertClassName = bem(styles, 'alert');

export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
  (
    {
      className,
      type,
      text,
      size = ALERT_SIZE.regular,
      theme = THEME.light,
      title,
      action,
      link,
      onDismiss,

      ...htmlAttributes
    },
    forwardedRef,
  ): JSX.Element => (
    <div
      {...htmlAttributes}
      ref={forwardedRef}
      className={alertClassName(null, { [theme]: true, [type]: true, [size]: true }, className)}
    >
      <div className={alertClassName('container')}>
        <img
          className={alertClassName('icon')}
          src={ALERT_ICONS_BY_TYPES[type]}
          alt={`icon-${ALERT_ICONS_BY_TYPES[type]}`}
        />

        <div className={alertClassName('content')}>
          {title && (
            <Typography
              className={alertClassName('title')}
              type={TYPOGRAPHY_TYPE.body3}
              theme={theme}
            >
              {title}
            </Typography>
          )}

          <Typography
            className={alertClassName('text')}
            theme={theme}
            type={TYPOGRAPHY_TYPE.body4}
          >
            {text}

            {link && (
              <a
                {...link.attributes}
                className={alertClassName('link')}
              >
                {link.text}
              </a>
            )}
          </Typography>
        </div>

        {action && (
          <Button
            className={alertClassName('action')}
            theme={theme}
            type={BUTTON_TYPE.secondary}
            size={ALERT_ACTION_SIZES_BY_SIZES[size]}
            onClick={action.onClick}
            caption={action.text}
          />
        )}

        {onDismiss && (
          <Button
            className={alertClassName('close')}
            theme={theme}
            type={BUTTON_TYPE.tertiary}
            size={BUTTON_SIZE.smallRound}
            icon="cross"
            onClick={onDismiss}
          />
        )}
      </div>
    </div>
  ),
);

Alert.displayName = 'Alert';