มาสร้าง Timer Version ต่อยอดกันเถอะ

const Timer = ({ onReset }) => {
  const [phase, setPhase] = useState('Work'); // Initial phase is work
  const [isRunning, setIsRunning] = useState(false);
  const [seconds, setSeconds] = useState(25 * 60); // Set initial time to 25 minutes (work phase)
  const phases = [
    { name: 'Work', duration: 25 * 60 },
    { name: 'Short Break', duration: 5 * 60 },
    { name: 'Long Break', duration: 15 * 60 },
  ];

useEffect(() => {
    let interval = null;

    if (isRunning && seconds > 0) {
      interval = setInterval(() => {
        setSeconds((prevSeconds) => prevSeconds - 1);
      }, 1000);
    } else {
      clearInterval(interval);
    }

    return () => clearInterval(interval);
  }, [isRunning, seconds]);

  useEffect(() => {
    if (phase === 'Long Break') {
      setPhase('Long Break');
    }
  }, [phase]);

  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;

    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
  };

const handleStartStop = () => {
    setIsRunning(!isRunning);
  };

  const handleReset = () => {
    setPhase('Work'); // Reset phase to work
    setSeconds(25 * 60); // Reset time to 25 minutes
    setIsRunning(false);
    onReset(); // Call the onReset function passed from the parent component
  };

  const handleNextPhase = () => {
    if (phase === 'Restart') {
      setPhase('Work');
      setSeconds(25 * 60);
    } else {
      const currentPhaseIndex = phases.findIndex((p) => p.name === phase);
      const nextPhaseIndex = (currentPhaseIndex + 1) % phases.length;
      const nextPhase = phases[nextPhaseIndex];

      setPhase(nextPhase.name);
      setSeconds(nextPhase.duration);
    }
    setIsRunning(false);
    onReset(); // Call the onReset function passed from the parent component
  };

return (
    <View style={styles.container}>
      <View style={styles.circle}>
        <Text style={styles.timerText}>{formatTime(seconds)}</Text>
        <Text style={styles.phaseText}>{phase}</Text>
    </View>
    <View style={styles.buttonContainer}>
      <TouchableOpacity
        style={[styles.button, isRunning ? styles.stopButtonRed : styles.startButtonGreen]}
        onPress={handleStartStop}
      >
        <Text style={styles.buttonText}>{isRunning ? 'Stop' : 'Start'}</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={handleReset}>
        <Text style={styles.buttonText}>Reset</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={handleNextPhase}>
        <Text style={styles.buttonText}>
           {phase === 'Restart' ? 'Restart ' : 'Next Phase'}
        </Text>
      </TouchableOpacity>
    </View>
  </View>
 );
};

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';

const Timer = ({ onReset }) => {
  const [phase, setPhase] = useState('Work'); // Initial phase is work
  const [isRunning, setIsRunning] = useState(false);
  const [seconds, setSeconds] = useState(25 * 60); // Set initial time to 25 minutes (work phase)
  const phases = [
    { name: 'Work', duration: 25 * 60 },
    { name: 'Short Break', duration: 5 * 60 },
    { name: 'Long Break', duration: 15 * 60 },
  ];

  useEffect(() => {
    let interval = null;

    if (isRunning && seconds > 0) {
      interval = setInterval(() => {
        setSeconds((prevSeconds) => prevSeconds - 1);
      }, 1000);
    } else {
      clearInterval(interval);
    }

    return () => clearInterval(interval);
  }, [isRunning, seconds]);

  useEffect(() => {
    if (phase === 'Long Break') {
      setPhase('Long Break');
    }
  }, [phase]);

  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;

    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
  };

  const handleStartStop = () => {
    setIsRunning(!isRunning);
  };

  const handleReset = () => {
    setPhase('Work'); // Reset phase to work
    setSeconds(25 * 60); // Reset time to 25 minutes
    setIsRunning(false);
    onReset(); // Call the onReset function passed from the parent component
  };

  const handleNextPhase = () => {
    if (phase === 'Restart') {
      setPhase('Work');
      setSeconds(25 * 60);
    } else {
      const currentPhaseIndex = phases.findIndex((p) => p.name === phase);
      const nextPhaseIndex = (currentPhaseIndex + 1) % phases.length;
      const nextPhase = phases[nextPhaseIndex];

      setPhase(nextPhase.name);
      setSeconds(nextPhase.duration);
    }
    setIsRunning(false);
    onReset(); // Call the onReset function passed from the parent component
  };

  return (
    <View style={styles.container}>
      <View style={styles.circle}>
        <Text style={styles.timerText}>{formatTime(seconds)}</Text>
        <Text style={styles.phaseText}>{phase}</Text>
    </View>
    <View style={styles.buttonContainer}>
      <TouchableOpacity
        style={[styles.button, isRunning ? styles.stopButtonRed : styles.startButtonGreen]}
        onPress={handleStartStop}
      >
        <Text style={styles.buttonText}>{isRunning ? 'Stop' : 'Start'}</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={handleReset}>
        <Text style={styles.buttonText}>Reset</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={handleNextPhase}>
        <Text style={styles.buttonText}>
           {phase === 'Restart' ? 'Restart ' : 'Next Phase'}
        </Text>
      </TouchableOpacity>
    </View>
  </View>
 );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  circle: {
    width: 200,
    height: 200,
    borderRadius: 100,
    borderWidth: 10,
    borderColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
  },
  timerText: {
    fontSize: 60,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  phaseText: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 8,
    color: 'gray',
  },
  buttonContainer: {
    marginTop: 20,
  },
  button: {
    backgroundColor: 'black',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
    marginBottom: 10,
  },
  buttonText: {
    fontSize: 16,
    textAlign: 'center',
    color: 'white',
  },
  startButtonGreen: {
    backgroundColor: 'green',
  },
  stopButtonRed: {
    backgroundColor: 'red',
  },
});

export default Timer;