"use client";

import React, { useEffect } from "react";

const TimeClock: React.FC = () => {
    useEffect(() => {
        const numbers = [
            [1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1], // 0
            [1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1], // 1
            [1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1], // 2
            [1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 3
            [1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1], // 4
            [1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], // 5
            [1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], // 6
            [1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0], // 7
            [1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 8
            [1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 9
        ];

        const blocks: Array<Element[]> = [];
        const digits = Array.from(document.querySelectorAll(".block"));

        for (let i = 0; i < 4; i++) {
            blocks.push(digits.slice(i * 15, i * 15 + 15));
        }

        const setNum = (block: Array<Element>, num: number) => {
            const n = numbers[num];
            for (let i = 0; i < block.length; i++) {
                block[i].classList[n[i] === 1 ? "add" : "remove"]("active");
            }
        };

        const time = {
            s: "",
            m: "",
            h: "",
            p: 0,
        };

        // time loop
        const animator = () => {
            const d = new Date();
            let h = d.getHours().toString(),
                m = d.getMinutes().toString(),
                s = d.getSeconds().toString();

            s = s.length === 1 ? "0" + s : s;
            m = m.length === 1 ? "0" + m : m;
            h = h.length === 1 ? "0" + h : h;

            if (s !== time.s) {
                for (let i = 0; i < digits.length; i++) {
                    const d = digits[i];
                    if (i === +s) {
                        d.classList.add("second");
                        if (time.p !== null) digits[time.p].classList.remove("second");
                        time.p = i;
                        time.s = s;
                    }
                }
            }

            if (m !== time.m) {
                setNum(blocks[2], parseInt(Array.from(m)[0]));
                setNum(blocks[3], parseInt(Array.from(m)[1]));
                time.m = m;
            }

            if (h !== time.h) {
                setNum(blocks[0], parseInt(Array.from(h)[0]));
                setNum(blocks[1], parseInt(Array.from(h)[1]));
                time.h = h;
            }
            window.requestAnimationFrame(animator);
        };

        // init
        window.requestAnimationFrame(animator);

        // toggle button
        const d = new Date();
        const days = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
        const months = [
            "Janvier",
            "Février",
            "Mars",
            "Avril",
            "Mai",
            "Juin",
            "Juillet",
            "Août",
            "Septembre",
            "Octobre",
            "Novembre",
            "Décembre",
        ];
        const lib_d = days[d.getDay()];
        const lib_m = months[d.getMonth()];
        const lib_n = d.getDate();
        const lib_y = d.getFullYear();
        document.getElementById("datelib")!.innerHTML = lib_d + " " + lib_n + " " + lib_m + " " + lib_y;
    }, []);

    return (
        <>
            <div className="date d-flex mb-2 pt-2">
                <div className="flex-grow-1"></div>
                <div className="datelib mt-2 pt-1 ps-1 font-monospace fs-5">
                    <span className="icon-calendar me-2" aria-hidden="true"></span>
                    <span id="datelib"></span>
                </div>
            </div>
            <div className="time d-flex">
                <div className="flex-grow-1"></div>
                <div className="clock position-relative d-flex flex-column flex-wrap">
                    <div className="block" data-num="0"></div>
                    <div className="block" data-num="1"></div>
                    <div className="block" data-num="2"></div>
                    <div className="block" data-num="3"></div>
                    <div className="block" data-num="4"></div>
                    <div className="block" data-num="5"></div>
                    <div className="block" data-num="6"></div>
                    <div className="block" data-num="7"></div>
                    <div className="block" data-num="8"></div>
                    <div className="block" data-num="9"></div>
                    <div className="block" data-num="10"></div>
                    <div className="block" data-num="11"></div>
                    <div className="block" data-num="12"></div>
                    <div className="block" data-num="13"></div>
                    <div className="block" data-num="14"></div>
                    <div className="block" data-num="15"></div>
                    <div className="block" data-num="16"></div>
                    <div className="block" data-num="17"></div>
                    <div className="block" data-num="18"></div>
                    <div className="block" data-num="19"></div>
                    <div className="block" data-num="20"></div>
                    <div className="block" data-num="21"></div>
                    <div className="block" data-num="22"></div>
                    <div className="block" data-num="23"></div>
                    <div className="block" data-num="24"></div>
                    <div className="block" data-num="25"></div>
                    <div className="block" data-num="26"></div>
                    <div className="block" data-num="27"></div>
                    <div className="block" data-num="28"></div>
                    <div className="block" data-num="29"></div>
                    <div className="block" data-num="30"></div>
                    <div className="block" data-num="31"></div>
                    <div className="block" data-num="32"></div>
                    <div className="block" data-num="33"></div>
                    <div className="block" data-num="34"></div>
                    <div className="block" data-num="35"></div>
                    <div className="block" data-num="36"></div>
                    <div className="block" data-num="37"></div>
                    <div className="block" data-num="38"></div>
                    <div className="block" data-num="39"></div>
                    <div className="block" data-num="40"></div>
                    <div className="block" data-num="41"></div>
                    <div className="block" data-num="42"></div>
                    <div className="block" data-num="43"></div>
                    <div className="block" data-num="44"></div>
                    <div className="block" data-num="45"></div>
                    <div className="block" data-num="46"></div>
                    <div className="block" data-num="47"></div>
                    <div className="block" data-num="48"></div>
                    <div className="block" data-num="49"></div>
                    <div className="block" data-num="50"></div>
                    <div className="block" data-num="51"></div>
                    <div className="block" data-num="52"></div>
                    <div className="block" data-num="53"></div>
                    <div className="block" data-num="54"></div>
                    <div className="block" data-num="55"></div>
                    <div className="block" data-num="56"></div>
                    <div className="block" data-num="57"></div>
                    <div className="block" data-num="58"></div>
                    <div className="block" data-num="59"></div>
                    <div className="divider position-absolute"></div>
                </div>
            </div>
        </>
    );
};

export default TimeClock;