m3-academy-template-vtexio-sabrina-miranda/custom/react/components/Countdown/index.tsx

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

import styles from "./styles.css";

import clock from "./assets/clock.svg";

interface CountdownProps {
    //formato: dd/mm/yyyy/hh:mm
    endDate: string;
}

interface Time {
    hour: number;
    minute: number;
    second: number;
}

const Countdown = ({endDate}: CountdownProps) => {

    const [time, setTime] = useState<Time>({
        hour: 0,
        minute: 0,
        second: 0
    });

    const [day, month, year, hourMinute] = endDate.split("/");
    const [hour, minute] = hourMinute.split(":");

    const updateTimer = () => {

        const finalDate = new Date(
            parseInt(year),
            parseInt(month) - 1,
            parseInt(day),
            parseInt(hour),
            parseInt(minute)
        ).getTime();

        const atualDate = new Date().getTime();

        let difference = finalDate - atualDate;

        const hours = Math.floor(difference / ( 1000 * 60 * 60));

        difference = difference - (hours * 60 * 60 * 1000);

        const minutes = Math.floor(difference / (1000 * 60));

        difference = difference - (minutes * 60 * 1000);

        const seconds= Math.floor(difference / 1000);

        if (hours <= 0) {
            setTime({
                hour: 0,
                minute: 0,
                second:0
            })

        }else {
            setTime({
                hour: hours,
                minute: minutes,
                second: seconds
            })
        }
    };

    useEffect(() => {
        setInterval(updateTimer, 1000);
    }, [])

    const hourString = time.hour.toString().padStart(2, "0");
    const minuteString = time.minute.toString().padStart(2, "0");
    const secondString = time.second.toString().padStart(2, "0");

    return (
        <div  className={styles.countdownWrapper}>
            <div className={styles.countdownBadge}>
                <img className={styles.countdownBadgeClock} src={clock} />
            </div>

            <div className={styles.countdownTitle}>
                <h1 className={styles.countdownHeading1}>Ofertas</h1>
                <h3 className={styles.countdownHeading3}>Não perca tempo,</h3>
                <h2 className={styles.countdownHeading2}>garanta agora!</h2>
            </div>

            <div className={styles.countdownText}>
                {`${hourString}:${minuteString}:${secondString}`}
            </div>
        </div>
    );
}

export default Countdown;