import React, { useRef } from 'react';
import { createPortal } from 'react-dom';
import Icon from '../Icon';
import './Toast.scss';

interface ToasterProps {
  /**
   * toaster to open
   */
  isOpen: boolean;
  /**
   * Type of toaster eg: success | warning | info | danger
   */
  variant: 'success' | 'warning' | 'danger' | 'info';
  /**
   * Options for where to show toaster
   */
  displayPosition:
    | 'top'
    | 'bottom'
    | 'top-right'
    | 'bottom-right'
    | 'top-left'
    | 'bottom-left';
  /**
   * Header Title
   */
  toastTitle: string;
  /**
   * Actual content to be shown in toaster, eg: warning toastMessage or success
   */
  toastMessage?: string;
  /**
   * Event for Cancel button
   */
  onCancelClick?: () => void;
  /**
   * Event for Cancel button
   */
  onMouseOverOnButton?: () => void;
  /**
   * Number of milliseconds Toaster need to display
   */
  displayDuration?: number;
  /**
   * label for close button
   */
  closeButtonLabel?: React.ReactNode;
}

const Toaster: React.FC<ToasterProps> = ({
  isOpen = false,
  variant = 'success',
  displayPosition = 'top-right',
  toastTitle = 'Success',
  onCancelClick = () => {
    isOpen = false;
  },
  toastMessage = 'Hello this is child element',
}) => {
  const getToasterIcon = (variant: string) => {
    let name = '';
    if (variant === 'success') {
      name = 'toast_sucess';
    } else if (variant === 'info') {
      name = 'toast_info';
    } else if (variant === 'warning') {
      name = 'warning_icon';
    } else {
      name = 'danger_icon';
    }
    return <Icon name={name} height={38} width={38} />;
  };

  if (!isOpen) return null;

  return createPortal(
    <div className={`toaster-overlay toaster-overlay--${displayPosition}`}>
      <div className={`toaster toaster--${displayPosition}`}>
        <div className={`toaster-container toaster--${variant}`}>
          <div className={`toaster-icon`}>{getToasterIcon(variant)}</div>
          <div className="toaster-content">
            <div className="toaster-header-title">{toastTitle}</div>
            <div className="toaster-main-content">{toastMessage}</div>
          </div>
          <div className="closeButtonLayout" onClick={onCancelClick}>
            <button className={`closeButton closeButton--${variant}`}>
              <span />
              <span />
            </button>
          </div>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default Toaster;