import { createPortal } from 'react-dom';
import Icon from '../Icon/Icon.js';
import { DrawerProps } from './Types.js';
import Button from '../Button/Button.js';
import classNames from 'classnames';
import './Drawer.scss';
import { useEffect } from 'react';
import Tooltip from '../Tooltip/Tooltip.js';

const Drawer = ({
  isOpen = true,
  children = 'Drawer content area',
  onClose = () => {},
  title = 'drawer',
  primaryButtonProps = {},
  secondaryButtonProps = {},
  showEditButton = false,
  onEdit = () => {},
  overlay = false,
  isFooterRequired = true,
  footerContent = null,
  paddingNotRequired = false,
  size = 'medium',
}: DrawerProps) => {
  let titleLength = 0;
  if (typeof title === 'string') {
    titleLength = title.length;
  }
  const onCancel = () => {
    if (secondaryButtonProps.onClick) {
      secondaryButtonProps.onClick();
    } else {
      onClose();
    }
  };

  const handleKeyDown: (event: KeyboardEvent) => void = (event) => {
    if (event?.key === 'Escape') {
      onClose();
    }
  };
  useEffect(() => {
    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
    }
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen]);

  if (!isOpen) {
    return null;
  }
  return createPortal(
    <div className="drawer-container">
      {overlay && <div className="overlay" />}

      <div className={classNames('drawer ', `drawer--${size}`)}>
        <div className="header">
          <div className="button-container">
            {showEditButton && (
              <button className="button" onClick={onEdit}>
                <Icon name="edit_icon" height={16} width={16} />
              </button>
            )}
            <button
              className={classNames('button ff-close-button')}
              onClick={onClose}
            >
              <Icon
                name="close"
                height={14}
                width={14}
                color="#ffffff"
                hoverEffect={false}
              />
            </button>
          </div>
          {titleLength > 80 ? (
            <Tooltip title={title as string}>
              <div className="title">
                {title?.toLocaleString().slice(0, 80)}...
              </div>
            </Tooltip>
          ) : (
            <div className="title">{title}</div>
          )}
        </div>
        <div
          className={classNames('ff-drawer-body', {
            'drawer-padding': paddingNotRequired,
            'no-footer': !isFooterRequired,
          })}
        >
          {children}
        </div>
        {isFooterRequired && (
          <div className="footer">
            {footerContent ? (
              footerContent
            ) : (
              <div className="button-container">
                {secondaryButtonProps.label && (
                  <Button
                    {...secondaryButtonProps}
                    onClick={onCancel}
                    variant="secondary"
                    transparentBackground={true}
                  />
                )}
                {primaryButtonProps.label && (
                  <Button
                    {...primaryButtonProps}
                    onClick={primaryButtonProps.onClick}
                    variant="primary"
                    transparentBackground={true}
                  />
                )}
              </div>
            )}
          </div>
        )}
      </div>
    </div>,
    document.body
  );
};

export default Drawer;