timers/src/pages/Timers/Timers.tsx

import {useEffect, useState} from 'react';
import Timer from '../../components/Timer/Timer';
import styles from './Timers.module.css';
import {formatFullTime, getClosestTime, timeTillDate} from "../../helpers/DateFunctions.ts";
import ReleaseList from "../../components/ReleaseList/ReleaseList.tsx";
import Button from "../../components/Button/Button.tsx";

const Timers = () => {
    const [time, setTime] = useState(new Date());
    const [isReleasesListOpen, setIsReleasesListOpen] = useState(false);
    const [isReverseTime, setIsReverseTime] = useState(false);

    useEffect(() => {
        const intervalId = setInterval(() => {
            setTime(new Date());
        }, 500);

        return () => clearInterval(intervalId);
    }, []);

    const handleToggleTime = () => {
        setIsReverseTime((prev) => !prev);
    };

    const targetTime = getClosestTime(22, 0);
    const displayTime = isReverseTime ? timeTillDate(targetTime) : formatFullTime(time);

    return (
        <>
            <div className={styles.content}>
                <header className={styles.header}>
                    <a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>
                        MetaTimer
                    </a>
                    <a
                        className={`${styles.header_text} ${styles.title} ${styles.header_item}`}
                        onClick={handleToggleTime}
                        style={{ cursor: 'pointer' }}
                    >
                        {displayTime}
                    </a>
                    <Button
                        className={styles.header_item}
                        label={"?"}
                        onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}
                    />
                </header>
                <div className={styles.timers_container}>
                    <Timer id={"timer_1"} />
                    <Timer id={"timer_2"} />
                    <Timer id={"timer_3"} />
                    <Timer id={"timer_4"} />
                </div>
            </div>
            <ReleaseList isOpen={isReleasesListOpen} onClose={() => setIsReleasesListOpen(false)} />
        </>
    );
};

export default Timers;