import React, { useRef } from 'react';
import { BoxDivProps, SilkeBox } from '../silke-box';
import { SilkeButton } from '../silke-button';
import { SilkeIcon, SilkeIcons } from '../silke-icon';
import { SilkeText } from '../silke-text';
import styles from './silke-alert-banner.scss';

export type AlertBannerKind = 'warning' | 'error' | 'success' | 'information';

export type SilkeAlertBannerProps = {
  kind: AlertBannerKind;
  title?: string | React.ReactNode;
  subtitle?: string | React.ReactNode;
  icon?: SilkeIcons;
  /**
   * Will add a remove button to notification
   */
  onRemove?: (e: React.MouseEvent) => void;
  /**
   * On click of action button
   * */
  onAction?: () => void;
  actionLabel?: string;
  fluid?: boolean;
} & Omit<BoxDivProps, 'height' | 'width' | 'tag'>;

const ICON_KIND: Record<AlertBannerKind, SilkeIcons> = {
  warning: 'error.triangle',
  error: 'ban',
  success: 'check.circle.outline',
  information: 'tooltip',
};

export function SilkeAlertBanner({
  title,
  subtitle,
  className,
  kind = 'information',
  onAction,
  actionLabel,
  onRemove,
  fluid = false,
  icon,
  ...rest
}: SilkeAlertBannerProps) {
  const cl: string[] = [styles.notificationBox];
  const iconRef = useRef<HTMLBaseElement>();

  if (className) cl.push(className);
  if (kind) cl.push(styles[kind]);
  if (fluid) cl.push(styles.fluid);

  return (
    <SilkeBox rounded="small" className={cl.join(' ')} {...rest}>
      <SilkeBox size="m" align="center" ref={iconRef}>
        <SilkeIcon icon={icon ?? ICON_KIND[kind]} className={styles.icon} />
      </SilkeBox>
      <SilkeBox
        flex
        column
        vPad="s"
        gap="xs"
        className={styles.content}
        hAlign="start"
        style={{ paddingRight: !onRemove ? '16px' : '0' }}
      >
        {title && <SilkeText weight="strong">{title}</SilkeText>}
        {subtitle && <SilkeText>{subtitle}</SilkeText>}
        {onAction && (
          <SilkeButton
            className={styles.action}
            kind="ghost"
            size="base"
            label={actionLabel}
            onClick={onAction}
          />
        )}
      </SilkeBox>
      {onRemove && (
        <SilkeBox size="m" align="center">
          <SilkeButton
            className={styles.close}
            kind="ghost"
            size="base"
            icon="close"
            onClick={onRemove}
          />
        </SilkeBox>
      )}
    </SilkeBox>
  );
}