transporter-app/components/task.js

import Card from "./card";
import {useEffect, useState} from "react";
import {Pressable, Image, Linking} from "react-native";

// Icons
import TickActive from '../assets/ph_check-fill.svg'
import TickDanger from '../assets/tick_danger.svg'
import TickSuccess from '../assets/tick_success.svg'
import Chevron from '../assets/bi_chevron.svg'


const Task = ({id, status, title, description, timeTill, navigation, timeFinished, imageType, navi}) => {

    const [leastTime, setLeastTime] = useState("");

    const variantSelection = () => {
        switch (status) {
            case "active":
                if (new Date().getTime() <= new Date(timeTill)) {
                    return "default"
                }
                return "error"
            case "completed":
                if (new Date(timeFinished).getTime() <= new Date(timeTill).getTime()) {
                    return "success"
                }
                return "danger"
        }
    }


    const countDays = () => {
        const date = new Date(timeTill);
        let now = !!timeFinished ? new Date(timeFinished) : new Date();

        const diffTime = Math.abs(date - now);
        return Math.floor(diffTime / (1000 * 60 * 60 * 24));
    }

    const countHours = () => {
        const date = new Date(timeTill);
        let now = !!timeFinished ? new Date(timeFinished) : new Date();

        if (now.getTime() <= date.getTime()) {
            now = now.getTime() + countDays() * 24 * 60 * 60 * 1000;
        } else {
            now = now.getTime() - countDays() * 24 * 60 * 60 * 1000;
        }

        const diffTime = Math.abs(date - now);
        return Math.floor(diffTime / (1000 * 60 * 60));
    }

    const countMinutes = () => {
        const date = new Date(timeTill);
        let now = !!timeFinished ? new Date(timeFinished) : new Date();

        if (now.getTime() <= date.getTime()) {
            now = now.getTime() + countDays() * 24 * 60 * 60 * 1000 + countHours() * 60 * 60 * 1000;
        } else {
            now = now.getTime() - countDays() * 24 * 60 * 60 * 1000 - countHours() * 60 * 60 * 1000;
        }
        const diffTime = Math.abs(date - now);
        return Math.floor(diffTime / (1000 * 60));
    }

    const absTime = () => {
        const query = {
            start: (d, idx) => {
                const val = +(d.split('').slice(-2).join(''))
                if (val > 10 && val < 20) return [`${d} дней`, `${d} часов`, `${d} минут`][idx]
                return query['1'](d, idx)
            }
            ,
            '1': (d, idx) => {
                const val = +(d.split('').slice(-1))
                if (val === 1) return [`${d} день`, `${d} час`, `${d} минута`][idx]
                return query['2-4'](d, idx)
            },
            '2-4': (d, idx) => {
                const val = +(d.split('').slice(-1))
                if (val > 1 && val < 5) return [`${d} дня`, `${d} часа`, `${d} минуты`][idx]
                return [`${d} дней`, `${d} часов`, `${d} минут`][idx]
            },
        }

        let days = query.start(`${countDays()}`, 0)
        const hours = query.start(`${countHours()}`, 1)
        const minutes = query.start(`${countMinutes()}`, 2)


        setLeastTime(`${days} ${hours} ${minutes}`)
    }

    useEffect(() => {
        absTime()
        if (status !== 'active') return;
        setInterval(() => absTime(), 1000)
    }, []);

    const SelectImage = () => {
        if (imageType === 'chevron') {
            return <Chevron style={{transform: [{rotate: '270deg'}]}}/>
        }

        switch (status) {
            case "active":
                return <TickActive />
            case "completed":
                if (new Date(timeFinished).getTime() <= new Date(timeTill).getTime()) {
                    return <TickSuccess />
                }
                return <TickDanger />
        }
    }

    return (
        <Pressable onPress={() => {
            navigation.navigate('Event', {id: id})
        }}>
            <Card.Block variant={variantSelection()}
                        image={<SelectImage />}>
                <Card.Header>
                    <Card.TitleHeader>{title}</Card.TitleHeader>
                </Card.Header>

                <Card.Body>
                    {!!description && <Card.TextSmall>{description}</Card.TextSmall>}
                    {!!navi && <Pressable style={{borderColor: "#ECA704", borderWidth: 2, borderRadius: 40, padding: 18, display: 'flex', flexDirection: "row", alignItems: 'center', marginBottom: 10}} onPress={() => Linking.openURL(`yandexnavi://build_route_on_map?lat_to=${navi.lat}&lon_to=${navi.lon}`)}>
                        <Image source={require('../assets/yandexNavi.png')} width={25} height={25} style={{marginRight: 10}}></Image>
                        <Card.TextSmall style={{color: "#000"}}>Открыть в яндекс картах</Card.TextSmall>
                    </Pressable>}

                    {
                        status === 'active' && new Date(timeTill) >= new Date() && <Card.TextSmall>Осталось времени: </Card.TextSmall>
                    }

                    {
                        status === 'active' && new Date(timeTill) < new Date() && <Card.TextSmall>Опоздание: </Card.TextSmall>
                    }

                    {
                        status === 'completed' && new Date(timeFinished) <= new Date(timeTill) &&
                        <Card.TextSmall>Завершено раньше на: </Card.TextSmall>
                    }
                    {
                        status === 'completed' && new Date(timeFinished) > new Date(timeTill) &&
                        <Card.TextSmall>Завершено c опозданием на: </Card.TextSmall>
                    }
                    <Card.TitleExtra>{leastTime}</Card.TitleExtra>
                </Card.Body>
            </Card.Block>
        </Pressable>
    )
}


export default Task;