//bismillahi alrahmani alrahim
 projectName = "pomodoro";

const audioSrc = "https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav";

const Title = () =>{
  return (
    <div>
    <h1>it's called pomodoro</h1>
    </div>
  )
};



const App = () =>{
  const [time, setTime] = React.useState(25*60);
  const [timeron, setTimeron] = React.useState(false);
  const [breaker, setBreaker] = React.useState(5*60);
  const [session, setSession] = React.useState(25*60);
  const [onBreak, setOnBreak] = React.useState(false);
  
  let player = React.useRef(null);
  
  React.useEffect(() =>{
    if (time <= 0) {
      setOnBreak(true);
      breakSound();
    } else if (!timeron && time == breaker) {
      setOnBreak(false);
    }
    console.log("test");
  },[time, onBreak, timeron, breaker, session]);
  
  const breakSound = () =>{
    player.currentTime = 0;
    player.play();
  } 
  const updateTimeB = (amount) => {
    if (breaker >= 3600 || breaker <= 60 && amount < 0 ) {
      return;
    };
    setBreaker((prev) => prev + amount);
  };
  const updateTimeS = (amount) => {
    if (session >= 3600 || session <= 60 && amount < 0 ) {
      return;
    };
    setSession((prev) => prev + amount);
    if (!timeron) {
      setTime(session + amount)
    }
  };
  const formater = (time) => {
    let mins = Math.floor(time / 60);
    let secs = time % 60;
    return (
      (mins < 10 ? "0" + mins : mins) + ":" + (secs < 10 ? "0" + secs : secs)
    );
  };
  const playPause = () => {
    let second = 1000;
    let date = new Date().getTime();
    let nextDate = new Date().getTime() + second;
    let onBreakVariable = onBreak;
    if (!timeron) {
      let interval = setInterval(()=> {
        date = new Date().getTime();
        if (date > nextDate) {
          setTime((prev) => {
            if (prev <= 0 && !onBreakVariable) {
              onBreakVariable = true;
              return breaker
            } else if (prev <= 0 && onBreakVariable) {
              onBreakVariable = false;
              setOnBreak(false);
              return session;
            }
            return prev - 1;
          });
          nextDate += second;
        }
      }, 30)
      localStorage.clear();
      localStorage.setItem("interval-id", interval);
    }
    if (timeron) {
      clearInterval(localStorage.getItem("interval-id"));
    }
    setTimeron(!timeron);
  }
  const resetTime = () => {
    clearInterval(localStorage.getItem("interval-id"));
    setTime(25 * 60);
    setBreaker(5 * 60);
    setSession(25 * 60);
    player.pause();
    player.currentTime = 0;
    setTimeron(false);
    setOnBreak(false);
  }
  ;
  return (
    <div>
      <Title />
      <div>
        <button id="break-increment" onClick={() => updateTimeB(60)}>up</button>
        <div id="break-label">break length: </div>
        <div id="break-length">{breaker / 60}</div>
        <button id="break-decrement" onClick={() => updateTimeB(-60)}>down</button>
        <br/>
        <button id="session-increment" onClick={() => updateTimeS(60)}>up</button>
        <div id="session-label">session length: </div>
        <div id="session-length">{session / 60}</div>
        <button id="session-decrement" value={"up"} onClick={() => updateTimeS(-60)}>down</button>
      </div>
      <div id="timer-label">{onBreak ? "break" : "session"}</div>
      <h1 id="time-left">{formater(time)}</h1>
      <button id="start_stop" onClick={playPause}>play/pause</button>
      <button id="reset" onClick={resetTime}>reset</button>
      <audio ref={(t)=>(player = t)} src={audioSrc} id="beep"/>
    </div>
  )
};


ReactDOM.render(<App />, document.getElementById("root"))