boxons/app/timer.tsx

import { useEffect, useState } from 'react';
import { useRoute } from '@react-navigation/native';

import { View } from '@/components/shared/Themed';
import styled from '@emotion/native';
import TimerContent from '@/components/useCases/timer/view/TimerContent';
import FinishContent from '@/components/useCases/timer/view/FinishContent';
import { TimerBgColor } from '@/components/useCases/timer/business/type';

interface TimerProps {
  reps: number;
  restTime: number;
  workTime: number;
}

export default function Timer() {
  const route = useRoute();
  const { reps, restTime, workTime } = route.params as TimerProps;

  const [currentRep, setCurrentRep] = useState<number>(0);
  const [timeLeft, setTimeLeft] = useState<number>(0);
  const [isWorkPhase, setIsWorkPhase] = useState<boolean>(true);
  const [isRunning, setIsRunning] = useState<boolean>(false);
  const [isFinish, setIsFinish] = useState<boolean>(false);

  useEffect(() => {
    handleStart();
  }, []);

  useEffect(() => {
    let timer: NodeJS.Timeout;

    if (isRunning && timeLeft > 0) {
      timer = setTimeout(() => {
        setTimeLeft(timeLeft - 1);
      }, 1000);
    } else if (isRunning && timeLeft === 0) {
      if (currentRep < reps) {
        if (isWorkPhase) {
          // If the work phase is over, move on to the rest phase
          setIsWorkPhase(false);
          setTimeLeft(restTime);
        } else {
          // If the rest phase is complete, move on to the next work phase
          setIsWorkPhase(true);
          setTimeLeft(workTime);
          setCurrentRep(currentRep + 1);
        }
      } else {
        // Done
        setIsRunning(false);
        setIsFinish(true);
      }
    }

    return () => clearTimeout(timer);
  }, [isRunning, timeLeft, currentRep, isWorkPhase, reps, workTime, restTime]);

  const handleStart = () => {
    setCurrentRep(1);
    setIsWorkPhase(true);
    setTimeLeft(workTime);
    setIsRunning(true);
    setIsFinish(false);
  };

  const handleContine = () => {
    setIsRunning(true);
  };

  const handleStop = () => {
    setIsRunning(false);
  };

  const renderBgColor: () => TimerBgColor = () => {
    if (isFinish) return 'black';
    if (isWorkPhase) return 'red';

    return 'green';
  }

  return (
    <Container bgColor={renderBgColor()}>
      {isFinish && (
        <FinishContent handleStart={handleStart} />
      )}

      {!isFinish && (
        <TimerContent
          isWorkPhase={isWorkPhase}
          timeLeft={timeLeft}
          reps={reps}
          bgColor={renderBgColor()}
          currentRep={currentRep}
          isRunning={isRunning}
          handleStop={handleStop}
          handleContine={handleContine}
        />
      )}
    </Container>
  );
}

const Container = styled(View)<{ bgColor: TimerBgColor }>(({ theme, bgColor }) => ({
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: theme.colors[bgColor]
}));