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;
  timeLeft: number;
  reps: number;
  currentRep: number;
  isRunning: boolean;
  handleStop: () => void;
  handleContine: () => void;
  nextRep: () => void;
  previousRep: () => void;
  bgColor: TimerBgColor;
  handleReset: () => void;
}

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

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

  const handleBackClick = () => {
    navigation.goBack();
    handleReset();
  };

  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}>
        <Button label={t('prev')} onPress={previousRep} />

        <ElasticSpacer />

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

        <ElasticSpacer />

        <Button label={t('next')} onPress={nextRep} />
      </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)(({ theme }) => ({
  fontSize: 50,
  fontWeight: 'bold',
  color: theme.colors.fixed.white
}));

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

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