import React, { useState, useEffect } from "react";
import Image from "next/image";

import styles from "./LabelView.module.scss";

type LabelViewT = {
  theme?: "light" | "dark" | undefined;
  show?: boolean;
  isSuccess: boolean;
  successText?: string | undefined | null;
  errorText?: string | undefined | null;
};

const LabelView = (props: LabelViewT) => {
  const { theme = "light", show, isSuccess, errorText, successText } = props;

  const [isVisible, setIsVisible] = useState(show);
  const [animationClass, setAnimationClass] = useState("");

  useEffect(() => {
    if (show) {
      setIsVisible(true);
      setAnimationClass(styles.slideIn); // show animation class
      const timer = setTimeout(() => {
        setAnimationClass(styles.slideOut); // hide animation class
        const timerHide = setTimeout(() => {
          setIsVisible(false);
        }, 1000); // time for animation hide
        return () => clearTimeout(timerHide);
      }, 3500); // time for animation show

      return () => clearTimeout(timer);
    }
  }, [show]);

  if (!isVisible) {
    return null;
  }

  return (
    <div
      className={
        theme === "light"
          ? isSuccess
            ? `${styles.labelViewWrapperLight} ${animationClass}`
            : `${styles.labelViewWrapperLight} ${animationClass} ${styles.labelErrorView}`
          : isSuccess
          ? `${styles.labelViewWrapperDark} ${animationClass}`
          : `${styles.labelViewWrapperDark} ${animationClass} ${styles.labelErrorViewDark}`
      }
    >
      <div className={styles.wrapperTextIcon}>
        <Image
          src={
            isSuccess
              ? theme === "light"
                ? require("../../assets/images/label-success-icon.svg")
                : require("../../assets/images/label-success-icon-dark.svg")
              : theme === "light"
              ? require("../../assets/images/label-error-icon.svg")
              : require("../../assets/images/label-error-icon-dark.svg")
          }
          height={24}
          width={24}
          alt={isSuccess ? "Success image" : "Error image"}
        />
        <p>{isSuccess ? successText : errorText}</p>
      </div>
    </div>
  );
};

export default LabelView;