import React, { useState, useEffect } from "react";
import {
  CustomToast,
  ToastImg,
  ToastTextContainer,
  ToastDescription,
  ToastMessage,
  FlexContainer,
  ToastCloseImg,
} from "./CustomToastStyles";
const close = new URL( "./assets/close.svg", import.meta.url).href
const success = new URL("./assets/toast-icon-success.svg", import.meta.url).href
const warning = new URL("./assets/toast-icon-warning.svg", import.meta.url).href
const error = new URL("./assets/toast-icon-error.svg", import.meta.url).href
const info = new URL("./assets/toast-icon-info.svg", import.meta.url).href

export interface CustomToastProps {
  variant?: string; // Success, Warning, Error, else Info
  message: string; // Do not change for Success, Warning, or Error variants -  min 5 char, max 35
  description: string; // max char 43
  color?: string; // component background color
  borderColor?: string;
  style?: object;
  remainsOnPage?: boolean; // ignore for use in Roo-React, only used for storybook info page
}
export const RooToast: React.FC<CustomToastProps> = (props) => {
  const { variant, remainsOnPage } = props;
  const [showToast, setShowToast] = useState(true);

  useEffect(() => {
    if (!remainsOnPage) setTimeout(() => setShowToast(false), 2000);
  }, []);

  return (
    <>
      {showToast ? (
        <CustomToast {...props}>
          <ToastCloseImg src={close} onClick={() => setShowToast(false)} />
          <FlexContainer>
            <ToastImg
              src={
                variant == "success"
                  ? success
                  : variant == "warning"
                  ? warning
                  : variant == "error"
                  ? error
                  : info
              }
            />
            <ToastTextContainer>
              <ToastMessage>{props.message}</ToastMessage>
              <ToastDescription>{props.description}</ToastDescription>
            </ToastTextContainer>
          </FlexContainer>
        </CustomToast>
      ) : null}
    </>
  );
};

