Untitled

import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { useStore } from '../utils/state';
import { url } from '../utils/config';
function PrayerTimeService() {

    const setData = useStore(state => state.setPrayerTimes);
    const setLoading = useStore(state => state.setLoading);
    const [currentSecond, setCurrentSecond] = useState("0");

    useEffect(() => {
        fetch(url)
            .then((resp) => resp.json())
            .then((json) => createPrayerList(json))
            .then((test) => setData(test))
            .catch((error) => console.error(error))
            .finally(() => setLoading(false));

        const startTime = () => {
            let dateNow = new Date();
            setCurrentSecond(dateNow.getSeconds());
            //console.log("Repetition...")
        };

        let interval = setInterval(() => startTime(), 1000);
        return () => {
            clearInterval(interval);
        };
    }, []);
    function formatTime(seconds) {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const remainingSeconds = seconds % 60;
        const testResult = hours + "h " + minutes + "m " + remainingSeconds + "s";
        //console.log(testResult)
        return `${hours}h ${minutes}m ${remainingSeconds}s`;
    }
    function calculateRemainingSeconds(data, item) {
        const dateNow = new Date();
        const dateTarget = new Date();
        dateTarget.setHours(data[item].split(":")[0])
        dateTarget.setMinutes(data[item].split(":")[1])
        const targetHour = dateTarget.getHours(); // Set your target hour here (24-hour format)
        const targetMinute = dateTarget.getMinutes(); // Set your target minute here

        const currentHour = dateNow.getHours();
        const currentMinute = dateNow.getMinutes();
        const currentS = currentSecond;
        let testResult = (
            (targetHour - currentHour) * 3600 +
            (targetMinute - currentMinute) * 60 -
            currentS
        );
        console.log("currentSecond: " + formatTime(testResult))
        return formatTime(testResult);
    }
    const getCurrentNextPrayer = data => {
        let currentPrayer = "";
        let nextPrayer = "";
        const dateNow = new Date();
        const dateTarget = new Date();
        for (let item in data) {
            if (item !== "date") {
                dateTarget.setHours(data[item].split(":")[0])
                dateTarget.setMinutes(data[item].split(":")[1])
                if (dateNow.getTime() < dateTarget.getTime()) {
                    //Next Prayer found, and loop break
                    nextPrayer = item;
                    break;
                }
                //Previous Prayer found
                currentPrayer = item;
            }
        }
        //console.log("currentPray: " + currentPrayer + " Next Pray: " + nextPrayer)
        return [currentPrayer, nextPrayer];
    }
    function createPrayerList(data) {
        let prayerList = [];
        let currentAndNextPrayer = getCurrentNextPrayer(data);
        let currentPrayer = currentAndNextPrayer[0];
        let nextPrayer = currentAndNextPrayer[1];
        for (let item in data) {
            if (item !== "date") {
                if (item == currentPrayer && item !== "terbit") {
                    //<Text>{calculateRemainingSeconds(data, item)}</Text>
                    prayerList.push(
                        <View style={styles.itemCurrent}>
                            <Text>{item} {data[item]}</Text>
                        </View>
                    )
                } else if (item == nextPrayer && item !== "terbit") {

                    //calculateRemainingSeconds(data, item);
                    prayerList.push(
                        <View style={styles.itemNext}>
                        <Text>{currentSecond}</Text>
                            <Text>{item} {data[item]}</Text>
                        </View>
                    )
                } else {
                    prayerList.push(
                        <View style={styles.item}>
                            <Text>{item} {data[item]}</Text>
                        </View>
                    )
                }
            }
        }
        console.log("currentPray: " + currentPrayer + " Next Pray: " + nextPrayer)
        return prayerList;
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "grey",
        padding: 10,
    },
    boxList: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "grey",
        padding: 10,
    },
    title: {
        fontSize: 30,
        fontWeight: "bold",
    },
    itemCurrent: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    },
    itemNext: {
        backgroundColor: 'darkyellow',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    },
    item: {
        backgroundColor: 'darkgrey',
        padding: 10,
        marginVertical: 8,
        marginHorizontal: 16,
    },
});
export default PrayerTimeService;