import * as React from "react";
import Countdown, { zeroPad } from "react-countdown";
import { Text, useColorMode } from "@chakra-ui/core";

const bg = { dark: "white", light: "black" };

const Renderer = ({ hours, minutes, seconds, completed, props }) => {
    if (completed) {
        return <Text fontSize="xs" />;
    } else {
        let time = [zeroPad(seconds)];
        minutes !== 0 && time.unshift(zeroPad(minutes));
        hours !== 0 && time.unshift(zeroPad(hours));
        return (
            <Text fontSize="xs" color="gray.500">
                {props.text}
                <Text as="span" fontSize="xs" color={bg[props.colorMode]}>
                    {time.join(":")}
                </Text>
            </Text>
        );
    }
};

const CacheTimeout = ({ timeout, text }) => {
    const then = timeout * 1000;
    const { colorMode } = useColorMode();
    return (
        <Countdown
            date={Date.now() + then}
            renderer={Renderer}
            daysInHours
            text={text}
            colorMode={colorMode}
        />
    );
};

CacheTimeout.displayName = "CacheTimeout";

export default CacheTimeout;