import { AnimatePresence } from "motion/react";
import { ReactNode, useEffect, useState } from "react";
import { v4 } from "uuid";
import { ATHOSToastProps } from "./interfaces";
import { ATWrapper } from "./styled";
const Toast = ({ children, className }: { children: ReactNode; className?: string }) => {
return {children}
;
};
export const ATHOSToast = (props: ATHOSToastProps) => {
const {
id = v4(),
updateState,
children,
renderCondition,
removeCondition: removeOnUpdateCondition,
position = "top-right",
gap = 5,
renderAndFade,
className,
fadeTime,
} = props;
const [hide, setHide] = useState(false);
useEffect(() => {
if (renderAndFade) {
setTimeout(() => {
setHide(true);
}, fadeTime || 3000);
}
}, [renderAndFade]);
const toasDftID = `athos-toast`;
const toastID = `${id}-${toasDftID}`;
const verifyPos = (remove?: boolean) => {
//select all that have toasDftID
const toastElements = document.querySelectorAll(`[id*=${toasDftID}]`);
//organize the toast elements in the screen
let offset = 10;
toastElements.forEach((element) => {
if (remove && element.id == toastID) {
return;
}
if (position.includes("top")) {
(element as HTMLElement).style.top = `${offset}px`;
} else {
(element as HTMLElement).style.bottom = `${offset}px`;
}
offset += element.clientHeight + gap;
});
};
useEffect(() => {
verifyPos(removeOnUpdateCondition);
}, [updateState, renderCondition]);
return (
{renderCondition && !hide && (
{typeof children === "string" ? {children} : children}
)}
);
};