time-until/src/screens/TimerScreen.js

import React from 'react';
import { ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
import CountdownRow from '../components/CountdownRow';
import TopControls from '../components/TopControls';

export default function TimerScreen({
  styles,
  theme,
  now,
  darkMode,
  pinkMode,
  isFullscreen,
  timerRunning,
  timerDone,
  timerRemaining,
  timerHInput,
  timerMInput,
  timerSInput,
  timerHr,
  timerMin,
  timerSec,
  onChangeH,
  onChangeM,
  onChangeS,
  onStart,
  onPause,
  onResume,
  onReset,
  onBackToMenu,
  onToggleDark,
  onTogglePink,
  onToggleFullscreen,
  onFocus,
}) {
  const timerActive = timerRunning || timerRemaining > 0 || timerDone;
  const isCountingDown = timerRemaining > 0;
  const pinkOutlineText = pinkMode
    ? {
        borderColor: theme.pink,
        borderWidth: 2,
        borderRadius: 12,
        paddingHorizontal: 20,
        paddingVertical: 8,
      }
    : {};

  return (
    <View style={[styles.root, { backgroundColor: theme.bg }]}>
      <ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
        <Text
          style={[
            styles.title,
            { color: theme.accent },
            pinkMode && {
              borderColor: theme.accent,
              borderWidth: 2,
              borderRadius: 10,
              paddingHorizontal: 16,
              paddingVertical: 4,
            },
          ]}
        >
          Timer
        </Text>

        <TopControls
          styles={styles}
          accent={theme.accent}
          pink={theme.pink}
          darkMode={darkMode}
          pinkMode={pinkMode}
          isFullscreen={isFullscreen}
          showBackToMenu
          showFocus={timerActive}
          onBackToMenu={onBackToMenu}
          onToggleDark={onToggleDark}
          onTogglePink={onTogglePink}
          onToggleFullscreen={onToggleFullscreen}
          onFocus={onFocus}
        />

        <View style={[styles.card, { backgroundColor: theme.cardBg, borderColor: theme.border }]}> 
          {!isCountingDown && !timerDone ? (
            <>
              <Text style={[styles.inputLabel, { color: theme.subText }]}>Set duration</Text>
              <View style={styles.inputRow}>
                <View style={styles.timerInputGroup}>
                  <TextInput
                    style={[
                      styles.timeInput,
                      { color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
                    ]}
                    placeholder="00"
                    placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
                    value={timerHInput}
                    onChangeText={onChangeH}
                    keyboardType="numeric"
                    maxLength={2}
                  />
                  <Text style={[styles.inputUnit, { color: theme.subText }]}>HRS</Text>
                </View>
                <Text style={[styles.colon, { color: theme.accent }]}>:</Text>
                <View style={styles.timerInputGroup}>
                  <TextInput
                    style={[
                      styles.timeInput,
                      { color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
                    ]}
                    placeholder="00"
                    placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
                    value={timerMInput}
                    onChangeText={onChangeM}
                    keyboardType="numeric"
                    maxLength={2}
                  />
                  <Text style={[styles.inputUnit, { color: theme.subText }]}>MIN</Text>
                </View>
                <Text style={[styles.colon, { color: theme.accent }]}>:</Text>
                <View style={styles.timerInputGroup}>
                  <TextInput
                    style={[
                      styles.timeInput,
                      { color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
                    ]}
                    placeholder="00"
                    placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
                    value={timerSInput}
                    onChangeText={onChangeS}
                    keyboardType="numeric"
                    maxLength={2}
                  />
                  <Text style={[styles.inputUnit, { color: theme.subText }]}>SEC</Text>
                </View>
              </View>

              <TouchableOpacity style={[styles.setBtn, { backgroundColor: theme.accent }]} onPress={onStart}>
                <Text style={styles.setBtnText}>Start</Text>
              </TouchableOpacity>
            </>
          ) : timerDone ? (
            <View style={styles.overContainer}>
              <Text style={[styles.overText, { color: pinkMode ? theme.pink : theme.danger }, pinkOutlineText]}>
                Done!
              </Text>
              <TouchableOpacity
                style={[styles.setBtn, { backgroundColor: theme.accent, marginTop: 20 }]}
                onPress={onReset}
              >
                <Text style={styles.setBtnText}>New Timer</Text>
              </TouchableOpacity>
            </View>
          ) : (
            <View style={styles.countdownContainer}>
              <View>
                <CountdownRow
                  styles={styles}
                  cd={{ hours: timerHr, minutes: timerMin, seconds: timerSec }}
                  accent={theme.accent}
                  subText={theme.subText}
                  pinkMode={pinkMode}
                  numStyle={styles.countdownNum}
                  sepStyle={styles.sep}
                />
              </View>

              <View style={styles.btnRow}>
                {timerRunning ? (
                  <TouchableOpacity style={[styles.resetBtn, { borderColor: theme.accent }]} onPress={onPause}>
                    <Text style={[styles.resetBtnText, { color: theme.accent }]}>Pause</Text>
                  </TouchableOpacity>
                ) : (
                  <TouchableOpacity style={[styles.setBtn, { backgroundColor: theme.accent }]} onPress={onResume}>
                    <Text style={styles.setBtnText}>Resume</Text>
                  </TouchableOpacity>
                )}

                <TouchableOpacity style={[styles.resetBtn, { borderColor: theme.danger }]} onPress={onReset}>
                  <Text style={[styles.resetBtnText, { color: theme.danger }]}>Reset</Text>
                </TouchableOpacity>
              </View>
            </View>
          )}
        </View>

        <Text style={[styles.clock, { color: theme.subText }]}>
          {now.toLocaleTimeString([], {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
          })}
        </Text>
      </ScrollView>
    </View>
  );
}