import React, { memo, useMemo } from "react";

import { HStack, Text } from "native-base";

interface ICountdown {
  time: number;
}

export const Countdown: React.FC<ICountdown> = ({ time }) => {
  const { hours, minutes, seconds } = useMemo((): {
    hours: string;
    minutes: string;
    seconds: string;
  } => {
    const currentHours = Math.floor(
      (time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const currentMinutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
    const currentSeconds = Math.floor((time % (1000 * 60)) / 1000);

    return {
      hours: currentHours < 10 ? `0${currentHours}` : currentHours.toString(),
      minutes:
        currentMinutes < 10 ? `0${currentMinutes}` : currentMinutes.toString(),
      seconds:
        currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds.toString(),
    };
  }, [time]);

  return (
    <HStack
      alignItems="center"
      bgColor={"crimsonRed.Minus3"}
      borderRadius="8px"
    >
      <Text px={1} fontSize="xs" color="crimsonRed.Plus1" fontWeight="bold">
        {hours}
      </Text>
      <Text fontSize="md" color="crimsonRed.Minus2">
        :
      </Text>
      <Text px={1} fontSize="xs" color="crimsonRed.Plus1" fontWeight="bold">
        {minutes}
      </Text>
      <Text fontSize="md" color="crimsonRed.Minus2">
        :
      </Text>
      <Text px={1} fontSize="xs" color="crimsonRed.Plus1" fontWeight="bold">
        {seconds}
      </Text>
    </HStack>
  );
};

export default memo(Countdown);