import React, { ReactNode } from 'react';
import './Popup.scss';
import { createPortal } from 'react-dom';
import Button from '../Button';
import Icon from '../Icon';
export interface PopupProps {
  /**
   * Popup to open
   */
  isOpen: boolean;
  /**
   * Type of Popup eg: success | warning | info | danger
   */
  type: string;
  /**
   * Header Title
   */
  headerTitle: string;
  /**
   * Text beside Header Title
   */
  headerText: string;
  /**
   * Continue button text
   */
  continueButtonLabel: string;
  /**
   * Cancel button text
   */
  cancelButtonLabel: string;
  /**
   * Continue button to disable or not
   */
  continueButtonDisable: boolean;
  /**
   * Cancel button to disable or not
   */
  cancelButtonDisable: boolean;
  /**
   * Event for Continue button
   */
  onContinueClick: () => void;
  /**
   * Event for Cancel button
   */
  onCancelClick: () => void;
  /**
   * Actual content to be shown in popup, eg: warning message or success
   */
  children?: ReactNode;
  /**
   * Footer content to be shown in popup, eg: Buttons or text
   */
  footerContent?: ReactNode;
}
/**
 * Popup component
 */
const Popup = ({
  isOpen = false,
  type = 'success',
  headerTitle = 'Success',
  headerText = '',
  continueButtonLabel = 'Continue',
  cancelButtonLabel = 'Cancel',
  continueButtonDisable = false,
  cancelButtonDisable = false,
  onContinueClick = () => {
    isOpen = false;
  },
  onCancelClick = () => {
    isOpen = false;
  },
  children = <>Hello this is child element</>,
  footerContent = null,
}: PopupProps) => {
  const getPopupIcon = (type: string) => {
    let name = '';
    if (type === 'success') {
      name = 'success';
    } else if (type === 'info') {
      name = 'info_icon';
    } else if (type === 'warning') {
      name = 'warning_icon';
    } else if (type === 'danger') {
      name = 'danger_icon';
    } else if (type === 'caution') {
      name = 'caution_icon';
    } else {
      name = 'info_icon';
    }
    return <Icon name={name} height={60} width={60} />;
  };
  if (!isOpen) return null;

  return createPortal(
    <div className="popup-overlay">
      <div className="popup">
        <div className={`popup-container popup--${type}`}>
          <div className="popup-icon-container">{getPopupIcon(type)}</div>
          <div className="popup-content">
            <div className="popup-header-content">
              <span className="popup-header-title">{headerTitle}</span>
              <span className="popup-header-text">{headerText}</span>
            </div>
            <div className="popup-main-content">{children}</div>
          </div>
        </div>
        {footerContent ? (
          footerContent
        ) : (
          <div className="popup-footer">
            <Button
              variant="secondary"
              onClick={onCancelClick}
              label={cancelButtonLabel}
              disabled={cancelButtonDisable}
            />
            <Button
              variant="primary"
              onClick={onContinueClick}
              label={continueButtonLabel}
              disabled={continueButtonDisable}
            />
          </div>
        )}
      </div>
    </div>,
    document.body
  );
};

export default Popup;