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 { VerticalSpacer } from '@/components/shared/Spacers';
import { TimerBgColor } from '@/components/useCases/timer/business/type';
import { useNavigation } from 'expo-router';
import { NativeStackNavigationProp } from 'react-native-screens/lib/typescript/native-stack/types';
import { RootStackParamList } from '@/app/RootStackParamList';
import { i18n } from '@/app/i18n/i18n';

interface TimerContentProps {
  isWorkPhase: boolean;
  timeLeft: number;
  reps: number;
  currentRep: number;
  isRunning: boolean;
  handleStop: () => void;
  handleContine: () => void;
  bgColor: TimerBgColor;
}

type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'Dashboard'>;

const t = i18n.scoped('timer.timerContent');

export default function TimerContent({
  isWorkPhase,
  timeLeft,
  reps,
  currentRep,
  isRunning,
  handleStop,
  handleContine,
  bgColor,
}: TimerContentProps ) {
  const navigation = useNavigation<NavigationProp>();

  return (
    <>
      <Title>{isWorkPhase ? t('fight') : t('rest')}</Title>

      <VerticalSpacer heightUnits={8} />

      <Time>
        {formatTime(timeLeft)}
      </Time>

      <VerticalSpacer heightUnits={8} />

      <Reps>{currentRep} / {reps}</Reps>

      <VerticalSpacer heightUnits={8} />

      <ButtonContainer bgColor={bgColor}>
        {isRunning ? (
          <Button label={t('stop')} onPress={handleStop} />
        ) : (
          <Button label={t('start')} onPress={handleContine} />
        )}

        <VerticalSpacer heightUnits={3} />

        <Button label={i18n.t('back')} onPress={() => navigation.navigate('Dashboard')} />
      </ButtonContainer>
    </>
  );
}

const ButtonContainer = styled(View)<{ bgColor: TimerBgColor }>(({ theme, bgColor }) => ({
  backgroundColor: theme.colors[bgColor]
}));

const Title = styled(Text)(({ theme }) => ({
  fontSize: 50,
  fontWeight: 'bold',
  color: theme.colors.white
}));

const Time = styled(Text)(({ theme }) => ({
  fontSize: 100,
  fontWeight: 'bold',
  color: theme.colors.white
}));

const Reps = styled(Text)(({ theme }) => ({
  fontSize: 30,
  fontWeight: 'bold',
  color: theme.colors.white
}));