import { Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
// import { RESET_TIME_TO_LOGOUT } from "../../lib/redux/slices/appSlice";
// import { LOG_OUT } from "../../lib/redux/slices/userSlice";
import { toHHMMSS } from "../../utils/toHHMMSS";
import { Grid } from "../grid/Grid";

export const TimeToLogOut = () => {
  const { inActiveTime } = useSelector((state) => state.appSlice);
  const [remainTime, setRemainTime] = useState(inActiveTime);
  // const dispatch = useDispatch();

  useEffect(() => {
    // dispatch(RESET_TIME_TO_LOGOUT());
    setRemainTime(inActiveTime);
  }, [window.location.pathname]);

  // useEffect(() => {
  //   if (remainTime < 1) {
  //     dispatch(LOG_OUT());
  //   }
  // }, [remainTime]);

  const timer = () => {
    setRemainTime((prevState) => prevState - 1);
  };

  useEffect(() => {
    if (remainTime <= 0) {
      return;
    }
    const id = setInterval(timer, 1000);
    return () => clearInterval(id);
  }, []);

  const auctionTimer = remainTime <= 0 ? "پایان یافته!" : toHHMMSS(remainTime);

  return (
    <Grid container alignItems="center" direction="column">
      <Typography variant="caption"> زمان تا خروج</Typography>
      <Typography variant="button">{auctionTimer}</Typography>
      {/* <Timer timerStateHandler={timeHandle} seconds={remainTime} /> */}
    </Grid>
  );
};
