import { useEffect, useState } from "react";
import { RiTimerLine } from "react-icons/ri";
import './index.css';

const Header = ({ info, examData }) => {
  console.log("header render===================");
  const [timer, setTimer] = useState(null);
  useEffect(() => {
    if (info?.duration === info?.remainingTime) {
      setTimer(info?.duration);
    } else {
      setTimer(info?.remainingTime +1);
    }
  }, [info]);
  return (
    <div className="Header w-full h-14 fixed top-2 left-0 px-28 bg-white">
      <div className="w-full h-full flex flex-row-reverse items-center justify-between rounded-lg border border-[#ECECEC] px-6">
        <div
          className="text-right text-sm text-right"
          style={{ width: "calc(100% - 220px)" }}
        >
          {info?.name}
        </div>
        <div className="w-52 flex items-center gap-x-2">
          <div className="w-[30%]">
            {timer && <Timer timer={timer} />}
          </div>
          <div className="text-sm" style={{ direction: "rtl" }}>
            زمان باقی‌مانده :
          </div>
          <RiTimerLine className="text-xl text-[#DF1452]" />
        </div>
      </div>
    </div>
  );
};

export default Header;

const Timer = ({ timer }) => {
  console.log(timer);
  const [min, setMin] = useState(timer);
  const [sec, setSec] = useState(0);
  const [showBtn, setShowbtn] = useState(false);

  setTimeout(() => {
    if (sec === 0 && min === 0) {
      setShowbtn(true);
    }
    if (sec === 0 && !showBtn) {
      setSec(59);
      setMin(min - 1);
    } else {
      setSec(sec - 1);
    }
  }, 1000);

  return (
    <>
      {!showBtn && (
        <div className="Code-container-send-code-again h-4/5 flex items-center justify-between">
          <div className="w-[48%] text-sm text-center">{min}</div>
          <div>:</div>
          <div className="w-[48%] text-sm text-center">{sec}</div>
        </div>
      )}
      {showBtn && (
        <div className="Code-container-send-code-again text-sm w-full text-center">
          اتمام زمان
        </div>
      )}
    </>
  );
};