import React, { useEffect } from "react";

import classNames from "classnames";
import { useDispatch } from "react-redux";

import Alert from "@enact/sandstone/Alert";
import Spotlight from "@enact/spotlight";

import { changeAppStatus } from "../../actions/commonActions";
import css from "./TToast.module.less";

export default function TToast({ text, ...rest }) {
  const dispatch = useDispatch();

  useEffect(() => {
    setTimeout(() => {
      dispatch(changeAppStatus({ toast: false }));
      Spotlight.focus();
    }, 1000);
  }, [dispatch]);

  return (
    <Alert
      className={classNames(css.ttoast)}
      open
      type="overlay"
      spotlightRestrict="self-first"
      scrimType="none"
    >
      {text}
    </Alert>
  );
}
