boxons/app/(tabs)/index.tsx

import React, { useEffect, useState } from 'react';

import { Text } from '@/components/shared/Themed';
import Card from '@/components/shared/Card';
import styled from '@emotion/native';
import { formatTime } from '@/components/shared/business/timeHelpers';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '@/app/RootStackParamList';
import { HorizontalSpacer, VerticalSpacer } from '@/components/shared/Spacers';
import { TimerPickerModal } from 'react-native-timer-picker';
import Button from '@/components/shared/Button';
import NumberSelector from '@/components/shared/NumberSelector';
import { i18n } from '@/app/i18n/i18n';
import { useTimerContext } from '@/app/store/TimerContext';
import { ActivityIndicator } from 'react-native';

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

const t = i18n.scoped('dashboard');

export default function Dashboard() {
  const navigation = useNavigation<NavigationProp>();
  const { timerState, isLoading, updateReps, updateWorkTime, updateRestTime, updatePreparationTime } = useTimerContext();

  const [showWorkTimePicker, setShowWorkTimePicker] = useState<boolean>(false);
  const [showPreparationTimePicker, setShowPreparationTimePicker] = useState<boolean>(false);
  const [showRestTimePicker, setShowRestTimePicker] = useState<boolean>(false);

  // Local variables for UI changes
  const [localPreparationTime, setLocalPreparationTime] = useState<number>(timerState.preparationTime);
  const [localReps, setLocalReps] = useState<number>(timerState.reps);
  const [localWorkTime, setLocalWorkTime] = useState<number>(timerState.workTime);
  const [localRestTime, setLocalRestTime] = useState<number>(timerState.restTime);

  // Update local states when store data is loaded
  useEffect(() => {
    console.log('timerState', timerState);
    if (!isLoading) {
      setLocalReps(timerState.reps);
      setLocalWorkTime(timerState.workTime);
      setLocalRestTime(timerState.restTime);
      setLocalPreparationTime(timerState.preparationTime);
    }
  }, [isLoading, timerState]);

  // Handle repetition changes
  const handleRepsChange = (value: number) => {
    setLocalReps(value);
    updateReps(value);
  };

  const totalWorkTime: string = formatTime((localWorkTime + localRestTime) * localReps);

  if (isLoading) {
    return (
      <LoadingContainer>
        <ActivityIndicator size="large" />
        <Text>Chargement...</Text>
      </LoadingContainer>
    );
  }

  return (
    <Container>
      <CardContainer>
        <Card backgroundColor="darkGrey" color="black" borderColor="darkGrey" onPress={() => setShowPreparationTimePicker(true)}>
          <CardTextContainer>
            <BlackCustomText>{t('preparation')}</BlackCustomText>
            <VerticalSpacer heightUnits={3} />
            <BlackCustomText>{formatTime(localPreparationTime)}</BlackCustomText>
          </CardTextContainer>
        </Card>

        <TimerPickerModal
          hideHours
          visible={showPreparationTimePicker}
          setIsVisible={setShowPreparationTimePicker}
          onConfirm={(pickedDuration: any) => {
            const newPreparationTime = pickedDuration.minutes * 60 + pickedDuration.seconds;
            setLocalPreparationTime(newPreparationTime);
            updatePreparationTime(newPreparationTime);
            setShowPreparationTimePicker(false);
          }}
          modalTitle={t('setPreparationTime')}
          onCancel={() => setShowPreparationTimePicker(false)}
          closeOnOverlayPress
          styles={{
            theme: "dark",
          }}
          initialValue={{ minutes: Math.floor(timerState.preparationTime / 60), seconds: timerState.preparationTime % 60 }}
          modalProps={{
            overlayOpacity: 0.2,
          }}
        />

        <Card backgroundColor="white" borderColor="pink" color="black" onPress={() => setShowWorkTimePicker(true)}>
          <CardTextContainer>
            <CustomText>{t('fight')}</CustomText>
            <VerticalSpacer heightUnits={3} />
            <CustomText>{formatTime(localWorkTime)}</CustomText>
          </CardTextContainer>
        </Card>

        <TimerPickerModal
          hideHours
          visible={showWorkTimePicker}
          setIsVisible={setShowWorkTimePicker}
          onConfirm={(pickedDuration: any) => {
            const newWorkTime = pickedDuration.minutes * 60 + pickedDuration.seconds;
            setLocalWorkTime(newWorkTime);
            updateWorkTime(newWorkTime);
            setShowWorkTimePicker(false);
          }}
          modalTitle={t('setWorkTime')}
          onCancel={() => setShowWorkTimePicker(false)}
          closeOnOverlayPress
          styles={{
            theme: "dark",
          }}
          initialValue={{ minutes: Math.floor(timerState.workTime / 60), seconds: timerState.workTime % 60 }}
          modalProps={{
            overlayOpacity: 0.2,
          }}
        />

        <Card backgroundColor="white" borderColor="blue" color='black' onPress={() => setShowRestTimePicker(true)}>
          <CardTextContainer>
            <CustomText>{t('rest')}</CustomText>
            <VerticalSpacer heightUnits={3} />
            <CustomText>{formatTime(localRestTime)}</CustomText>
          </CardTextContainer>
        </Card>

        <TimerPickerModal
          hideHours
          visible={showRestTimePicker}
          setIsVisible={setShowRestTimePicker}
          onConfirm={(pickedDuration: any) => {
            const newRestTime = pickedDuration.minutes * 60 + pickedDuration.seconds;
            setLocalRestTime(newRestTime);
            updateRestTime(newRestTime);
            setShowRestTimePicker(false);
          }}
          modalTitle={t('setRestTime')}
          onCancel={() => setShowRestTimePicker(false)}
          closeOnOverlayPress
          initialValue={{ minutes: Math.floor(timerState.restTime / 60), seconds: timerState.restTime % 60 }}
          styles={{
            theme: "dark",
          }}
          modalProps={{
            overlayOpacity: 0.2,
          }}
        />

        <Card backgroundColor="black" color="white" borderColor="black">
          <CardTextContainer>
            <WhiteCustomText>{t('repetition')}</WhiteCustomText>
            <VerticalSpacer heightUnits={3} />
            <NumberSelector reps={localReps} setReps={handleRepsChange} />
          </CardTextContainer>
        </Card>
      </CardContainer>

      <VerticalSpacer heightUnits={5} />
      <CenterText>{t('totalTime')}: {totalWorkTime}</CenterText>

      <VerticalSpacer heightUnits={5} />

      <Row>
        <SmallButton color="blue" labelColor="white" label={t('settings')} onPress={() => navigation.navigate('Settings')} />
        <LargeButton color="pink" labelColor="white" label={t('begin')} onPress={() => navigation.navigate('Timer')} />
      </Row>
    </Container>
  );
}

const Row = styled.View({
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  width: '100%'
})

const SmallButton = styled(Button)({
  width: '30%'
})

const LargeButton = styled(Button)({
  width: '65%'
})

const LoadingContainer = styled.View({
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  padding: 20
});

const Title = styled(Text)(({ theme }) => ({
  textAlign: 'center',
  fontSize: 40,
  fontWeight: 'bold',
  color: theme.colors.fixed.black
}));

const Container = styled.View({
  padding: 20
})

const CardTextContainer = styled.View({
  flexDirection: 'column',
  justifyContent: 'space-between',
  alignItems: 'center'
})

const CardContainer = styled.View({
  flexDirection: 'column',
  gap: 10
})

const CustomText = styled(Text)(({ theme }) => ({
  fontSize: 23,
  fontWeight: 'bold',
  textAlign: 'center',
}))

const WhiteCustomText = styled(CustomText)(({ theme }) => ({
  color: theme.colors.fixed.white
}))

const BlackCustomText = styled(CustomText)(({ theme }) => ({
  color: theme.colors.fixed.black
}))

const CenterText = styled(Text)(({ theme }) => ({
  textAlign: 'center',
  fontSize: 22,
  color: theme.colors.fixed.black
}))