import React, {memo} from 'react';
import {View} from 'react-native';
import {Badge, Typography, TypographyProps} from '@components';
import {useTimerDisplay} from '@modules/timeTracking/hooks';
import {getFormattedTimer} from '@modules/timeTracking/utils';
import {toHoursAndMinutesFormatted} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  excessTime?: Nullable<number>;
  isActive?: boolean;
  showSeconds?: boolean;
  accumulatedSeconds: number;
  currentRegisterStartTime?: Nullable<string>;
  variant?: TypographyProps['variant'];
}

function Clock({
  excessTime,
  isActive = false,
  showSeconds,
  variant = 'l',
  accumulatedSeconds,
  currentRegisterStartTime,
}: Props) {
  const {theme} = useTheme();
  const subTextVariant = variant === 'l' ? 's' : 'xxs';
  const displaySeconds = useTimerDisplay({
    isActive,
    startTime: currentRegisterStartTime,
    accumulatedSeconds,
  });
  const timer = toHoursAndMinutesFormatted(displaySeconds);
  const excessTimeFormatted = toHoursAndMinutesFormatted(excessTime || 0);

  return (
    <View style={styles.container}>
      {isActive && <Badge show variant="success" style={styles.activeBadge} />}
      <Typography variant={variant} weight="semiBold">
        {getFormattedTimer(timer)}
      </Typography>
      {showSeconds && (
        <Typography
          color={theme.text.neutral.lighter}
          style={styles.extraText}
          variant={subTextVariant}>
          {`${timer.s}s`}
        </Typography>
      )}
      {!!excessTime && (
        <Typography
          color={theme.graphics.success[600]}
          style={styles.extraText}
          variant={subTextVariant}
          weight="semiBold">
          {`+${getFormattedTimer(excessTimeFormatted)}`}
        </Typography>
      )}
    </View>
  );
}

export default memo(Clock);