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-toast-notification.scss';
import userConfetti from './confetti';

export type ToastNotificationKind = 'warning' | 'error' | 'success' | 'information' | 'confetti';

export type SilkeToastNotificationProps = {
  kind: ToastNotificationKind;
  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<ToastNotificationKind, SilkeIcons> = {
  warning: 'error.triangle',
  error: 'ban.light',
  success: 'check.circle.outline',
  information: 'tooltip',
  confetti: '🎉' as SilkeIcons,
};

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

  if (kind === 'confetti') userConfetti(iconRef as any);

  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}
        style={{ marginTop: doublePadding ? '4px' : '0px' }}
      >
        <SilkeIcon
          icon={icon ?? ICON_KIND[kind]}
          className={[styles.icon, kind === 'confetti' && styles.scale].filter(Boolean).join(' ')}
        />
      </SilkeBox>
      <SilkeBox
        flex
        column
        vPad={doublePadding ? 'm' : 's'}
        gap="xs"
        className={styles.content}
        hAlign="start"
      >
        {title && <SilkeText weight="strong">{title}</SilkeText>}
        {subtitle && (
          <SilkeText color={!title ? 'neutral-100' : 'neutral-80'}>{subtitle}</SilkeText>
        )}
        {onAction && (
          <SilkeButton
            className={styles.action}
            kind="ghost"
            size="base"
            label={actionLabel}
            onClick={onAction}
          />
        )}
      </SilkeBox>
      <SilkeBox size="m" align="center">
        {onRemove && (
          <SilkeButton
            className={styles.close}
            kind="ghost"
            size="base"
            icon="close"
            onClick={onRemove}
          />
        )}
      </SilkeBox>
    </SilkeBox>
  );
}