boxons/components/useCases/timer/view/TimerContent.tsx

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 (
    <View>
      <Column bgColor={bgColor}>
        <PartContainer>
          <Text>3:23</Text>
          {!isPreparationPhase && <Reps>{currentRep} / {reps}</Reps>}
          {isPreparationPhase && <Reps isPreparationPhase={true}>{t('preparationDescription')}</Reps>}
        </PartContainer>

        <PartContainer>
          <Title isPreparationPhase={isPreparationPhase}>{getTitle()}</Title>
          <VerticalSpacer heightUnits={2} />
          <Time isPreparationPhase={isPreparationPhase}>
            {formatTime(timeLeft)}
          </Time>
        </PartContainer>

        <PartContainer>
          <ButtonContainer bgColor={bgColor}>
            <Button
              secondary={true}
              label={t('prev')}
              color={'black'}
              labelColor={'white'}
              onPress={isPreparationPhase ? handleNoop : previousRep}
              status={isPreparationPhase ? 'disabled' : 'ready'}
            />

            <ElasticSpacer />

            {isRunning ? (
              <Button secondary={true} color={'black'} label={t('stop')} onPress={handleStop} />
            ) : (
              <Button secondary={true} color={'black'} label={t('start')} onPress={handleContinue} />
            )}

            <ElasticSpacer />

            <Button
              secondary={true}
              label={t('next')}
              color={'black'}
              onPress={isPreparationPhase ? nextRep : nextRep}
              status="ready"
            />
          </ButtonContainer>

          <VerticalSpacer heightUnits={4} />

          <Button label={i18n.t('back')} onPress={handleBackClick} />
        </PartContainer>
      </Column>
    </View>
  );
}

const PartContainer = styled(View)({
  backgroundColor: 'transparent',
});

const ButtonContainer = styled(View)<{ bgColor: TimerBgColor }>(({ theme, bgColor }) => ({
  backgroundColor: theme.colors.fixed[bgColor],
  flexDirection: 'row',
  gap: 10,
  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 Column = styled(View)<{ bgColor: TimerBgColor }>(({ theme, bgColor }) => ({
  flexDirection: 'column',
  justifyContent: 'space-around',
  height: '100%',
  backgroundColor: theme.colors.fixed[bgColor],
}));

const Reps = styled(Text)<{ isPreparationPhase?: boolean }>(({ theme, isPreparationPhase = false }) => ({
  fontSize: 30,
  fontWeight: 'bold',
  color: isPreparationPhase ? theme.colors.fixed.black : theme.colors.fixed.white
}));