131 lines
3.6 KiB
TypeScript
131 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import { Text, View } from '@/components/shared/Themed';
|
|
import styled from '@emotion/native';
|
|
import { formatTime } from '@/components/shared/business/timeHelpers';
|
|
import Button from '@/components/shared/Button';
|
|
import { ElasticSpacer, VerticalSpacer } from '@/components/shared/Spacers';
|
|
import { TimerBgColor } from '@/components/useCases/timer/business/type';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { i18n } from '@/app/i18n/i18n';
|
|
|
|
interface TimerContentProps {
|
|
isWorkPhase: boolean;
|
|
isPreparationPhase?: boolean;
|
|
timeLeft: number;
|
|
reps: number;
|
|
currentRep: number;
|
|
isRunning: boolean;
|
|
handleStop: () => void;
|
|
handleContinue: () => void;
|
|
nextRep: () => void;
|
|
previousRep: () => void;
|
|
bgColor: TimerBgColor;
|
|
handleReset: () => void;
|
|
}
|
|
|
|
const t = i18n.scoped('timer.timerContent');
|
|
|
|
export default function TimerContent({
|
|
isWorkPhase,
|
|
isPreparationPhase = false,
|
|
timeLeft,
|
|
reps,
|
|
currentRep,
|
|
isRunning,
|
|
handleStop,
|
|
handleContinue,
|
|
handleReset,
|
|
nextRep,
|
|
previousRep,
|
|
bgColor,
|
|
}: TimerContentProps ) {
|
|
const navigation = useNavigation();
|
|
|
|
const handleBackClick = () => {
|
|
navigation.goBack();
|
|
handleReset();
|
|
};
|
|
|
|
const getTitle = () => {
|
|
if (isPreparationPhase) return t('preparation');
|
|
if (isWorkPhase) return t('fight');
|
|
return t('rest');
|
|
};
|
|
|
|
// Handler for disabled buttons during preparation phase
|
|
const handleNoop = () => {
|
|
// Ne fait rien si on est en phase de préparation
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Title isPreparationPhase={isPreparationPhase}>{getTitle()}</Title>
|
|
|
|
<VerticalSpacer heightUnits={8} />
|
|
|
|
<Time isPreparationPhase={isPreparationPhase}>
|
|
{formatTime(timeLeft)}
|
|
</Time>
|
|
|
|
<VerticalSpacer heightUnits={8} />
|
|
|
|
{!isPreparationPhase && <Reps>{currentRep} / {reps}</Reps>}
|
|
{isPreparationPhase && <Reps isPreparationPhase={true}>{t('preparationDescription')}</Reps>}
|
|
|
|
<VerticalSpacer heightUnits={8} />
|
|
|
|
<ButtonContainer bgColor={bgColor}>
|
|
<Button
|
|
label={t('prev')}
|
|
onPress={isPreparationPhase ? handleNoop : previousRep}
|
|
status={isPreparationPhase ? 'disabled' : 'ready'}
|
|
/>
|
|
|
|
<ElasticSpacer />
|
|
|
|
{isRunning ? (
|
|
<Button label={t('stop')} onPress={handleStop} />
|
|
) : (
|
|
<Button label={t('start')} onPress={handleContinue} />
|
|
)}
|
|
|
|
<ElasticSpacer />
|
|
|
|
<Button
|
|
label={t('next')}
|
|
onPress={isPreparationPhase ? nextRep : nextRep}
|
|
status="ready"
|
|
/>
|
|
</ButtonContainer>
|
|
|
|
<VerticalSpacer heightUnits={4} />
|
|
|
|
<Button label={i18n.t('back')} onPress={handleBackClick} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
const ButtonContainer = styled(View)<{ bgColor: TimerBgColor }>(({ theme, bgColor }) => ({
|
|
backgroundColor: theme.colors.fixed[bgColor],
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
}));
|
|
|
|
const Title = styled(Text)<{ isPreparationPhase?: boolean }>(({ theme, isPreparationPhase = false }) => ({
|
|
fontSize: 50,
|
|
fontWeight: 'bold',
|
|
color: isPreparationPhase ? theme.colors.fixed.black : theme.colors.fixed.white
|
|
}));
|
|
|
|
const Time = styled(Text)<{ isPreparationPhase?: boolean }>(({ theme, isPreparationPhase = false }) => ({
|
|
fontSize: 100,
|
|
fontWeight: 'bold',
|
|
color: isPreparationPhase ? theme.colors.fixed.black : theme.colors.fixed.white
|
|
}));
|
|
|
|
const Reps = styled(Text)<{ isPreparationPhase?: boolean }>(({ theme, isPreparationPhase = false }) => ({
|
|
fontSize: 30,
|
|
fontWeight: 'bold',
|
|
color: isPreparationPhase ? theme.colors.fixed.black : theme.colors.fixed.white
|
|
}));
|