import { IconCheckCircle, IconInfo, IconWarning } from '../Icon';
import React from 'react';

export interface IAlert {
  className?: string;
  children?: React.ReactNode;
  dismissible?: boolean;
  show?: boolean;
  style?: React.CSSProperties;
  variant?:
    | 'primary'
    | 'secondary'
    | 'info'
    | 'success'
    | 'warning'
    | 'danger'
  onClose?(): void;
  [x: string]: any;
}

export const Alert: React.FC<IAlert> = (props) => {
  const { children, className = '', dismissible, style, show = true, variant = 'warning', onClose, ...otherProps } = props;
  function handleClose() {
    onClose && onClose();
  }
  return (
    <div className={`b-alert ${dismissible ? 'is-dismissible' : ''} ${show ? 'is-visible' : 'is-hidden'} ${variant} ${className}`} style={style} {...otherProps}>
      <React.Fragment>
        <span className="b-alert-icon">
          { variant == "success" && <IconCheckCircle color="success" size="lg" /> }
          { variant == "danger" && <IconWarning color="danger" size="lg" /> }
          { variant == "warning" && <IconWarning color="warning" size="lg" /> }
          { variant == "info" && <IconInfo color="info" size="lg" /> }
        </span>
        {children}
        {dismissible && (
          <button type="button" className="b-alert-close-btn" onClick={() => handleClose()}>
            &times;
          </button>
        )}
      </React.Fragment>
    </div>
  );
};