import { IonImg } from "@ionic/react";
import React, { Fragment } from "react";
import "./index.sass";

interface Props {
  msg: string;
  icon?: string;
  onUndoHandler?: () => void;
  show: boolean;
  onHideHandler: () => void;
  duration: number;
}

const FloatingMessageComponent: React.FC<Props> = (props: Props) => {
  const onHideHandler = async () => {
    props.onHideHandler();
  };

  if (props.show) {
    setTimeout(() => {
      onHideHandler();
    }, props.duration);
  }

  return (
    <Fragment>
      {props.show && (
        <div className="floating-message-component">
          <div className="floating-msg-container">
            <div className="floating-msg">
              <div className="left">
                <IonImg src={props.icon} />
                <div>{props.msg}</div>
              </div>
              {props.onUndoHandler && (
                <div className="undo" onClick={(e) => props.onHideHandler()}>
                  Deshacer
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </Fragment>
  );
};

export default FloatingMessageComponent;