import React, { 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 { 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';

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

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

export default function Dashboard() {
  const navigation = useNavigation<NavigationProp>();

  const [reps, setReps] = useState<number>(1);
  const [workTime, setWorkTime] = useState<number>(0);
  const [restTime, setRestTime] = useState<number>(0);
  const [showWorkTimePicker, setShowWorkTimePicker] = useState<boolean>(false);
  const [showRestTimePicker, setShowRestTimePicker] = useState<boolean>(false);

  const totalWorkTime: string = formatTime((workTime + restTime) * reps);

  return (
    <Container>
      <Title>{i18n.t('appTitle')}</Title>

      <VerticalSpacer heightUnits={8} />

      <CardContainer>
        <Card backgroundColor="black">
          <CardTextContainer>
            <CustomText>{t('repetition')}</CustomText>
            <NumberSelector reps={reps} setReps={setReps} />
          </CardTextContainer>
        </Card>

        <Card backgroundColor="red" onPress={() => setShowWorkTimePicker(true)}>
          <CardTextContainer>
            <CustomText>{t('fight')}</CustomText>
            <CustomText>{formatTime(workTime)}</CustomText>
          </CardTextContainer>
        </Card>

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

        <Card backgroundColor="green" onPress={() => setShowRestTimePicker(true)}>
          <CardTextContainer>
            <CustomText>{t('rest')}</CustomText>
            <CustomText>{formatTime(restTime)}</CustomText>
          </CardTextContainer>
        </Card>

        <TimerPickerModal
          hideHours
          visible={showRestTimePicker}
          setIsVisible={setShowRestTimePicker}
          onConfirm={(pickedDuration: any) => {
            setRestTime(pickedDuration.minutes * 60 + pickedDuration.seconds);
            setShowRestTimePicker(false);
          }}
          modalTitle={t('setRestTime')}
          onCancel={() => setShowRestTimePicker(false)}
          closeOnOverlayPress
          styles={{
            theme: "dark",
          }}
          modalProps={{
            overlayOpacity: 0.2,
          }}
        />
      </CardContainer>

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

      <VerticalSpacer heightUnits={5} />

      <Button label={t('begin')} onPress={() => navigation.navigate('Timer', { reps, restTime, workTime})} />

      <VerticalSpacer heightUnits={5} />

      <Button label={t('settings')} onPress={() => navigation.navigate('Settings')} />
    </Container>
  );
}

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: 'row',
  justifyContent: 'space-between',
  alignItems: 'center'
})

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

const CustomText = styled(Text)(({ theme }) => ({
  fontSize: 20,
  fontWeight: 'bold',
  textAlign: 'center',
  color: theme.colors.fixed.white
}))