import {ScrollView, Pressable, View} from "react-native";
import Accordion from "../../acordion";
import Button from "../../button";
import {useNavigation, useRoute} from "@react-navigation/native";
import Task from "../../task";
import {useSnapshot} from "valtio";
import EventStore from "../../../store/eventStore";
import Card from "../../card";
import ModalView, {ModalButtonError, ModalButtonSuccess} from "../../modal";
import Api from "../../../services/api";
import {useState} from "react";

const Event = () => {
    const navigation = useNavigation()
    const taskId = useRoute().params.id
    const {eventTasks} = useSnapshot(EventStore)

    const [modalVisible, setModalVisible] = useState(false);

    return (
        <>
            <ScrollView style={{padding: 20}}>
                <Button text={"Добавить новое событие"} onPress={() => navigation.navigate('InputEvent', {taskId: taskId})} />
                <Accordion title={"Активные События"} style={{marginBottom: 20}}>
                    {eventTasks.filter(({task_id: taskIdApi, is_completed: isCompleted}) => taskIdApi === taskId && !isCompleted).map(event =>

                        // TODO Modal
                        <Task status={event.is_completed ? 'completed' : 'active'} type={'event'} {...event}  onPress={() => setModalVisible(true)}/>)
                    }

                </Accordion>
                <Accordion title={"Архивные События"}>
                </Accordion>

                <ModalView text={"Событие выполнено?"} isVisible={modalVisible} setIsVisible={setModalVisible}>
                    <ModalButtonSuccess text={"Да"} onPress={() => setModalVisible(false)} />
                </ModalView>
            </ScrollView>
        </>
    )
}

export default Event;