From 15db906f330ebd907abed7957d8e45eba8f1dae1 Mon Sep 17 00:00:00 2001
From: Vyacheslav <sheptikhinv@gmail.com>
Date: Sun, 13 Jul 2025 18:35:56 +0500
Subject: [PATCH] add opportunity to see how much time till shift ends

---
 src/pages/Timers/Timers.tsx | 42 ++++++++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/pages/Timers/Timers.tsx b/src/pages/Timers/Timers.tsx
index c2456db..701b20c 100644
--- a/src/pages/Timers/Timers.tsx
+++ b/src/pages/Timers/Timers.tsx
@@ -1,14 +1,14 @@
 import {useEffect, useState} from 'react';
 import Timer from '../../components/Timer/Timer';
 import styles from './Timers.module.css';
-import {formatFullTime} from "../../helpers/DateFunctions.ts";
+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(() => {
@@ -16,27 +16,45 @@ const Timers = () => {
         }, 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}`}>{formatFullTime(time)}</a>
-                    <Button className={styles.header_item} label={"?"} onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}/>
+                    <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"}/>
+                    <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;
\ No newline at end of file