import {ScrollView, View, Text, Modal, Pressable} from "react-native";
import ModalView, {ModalButtonSuccess, ModalButtonError} from "../../modal";
import Accordion from "../../acordion";
import Task from "../../task";
import {useEffect, useState} from "react";
import Api from "../../../services/api";
import {useRoute} from "@react-navigation/native";
import SubtaskStore, {getSubtaskForTaskId, getSubtasks} from "../../../store/subtaskStore";
import {useSnapshot} from "valtio";


const useSubtasks = () => {
    const revalidateHandler = () => {
        getSubtasks();
    }

    useEffect(() => {
        revalidateHandler()
    }, []);

    return {revalidateHandler}
}

const SubTask = ({route, navigation}) => {
    const [modalVisible, setModalVisible] = useState(false)
    const [subtaskId, setSubtaskId] = useState(null)
    const {revalidateHandler} = useSubtasks()
    const {subtasks} = useSnapshot(SubtaskStore)
    const taskId = useRoute().params.id

    return (
        <ScrollView style={{padding: 20}}>
                <Accordion title={"Активные"} style={{marginBottom: 20}}>
                    {subtasks.filter(elem => elem.status === 'active' && elem.task_id === taskId).map(elem => <Task
                        {...elem}
                        key={elem.id}
                        onPress={() => {
                            setSubtaskId(elem.id)
                            setModalVisible(true)
                        }
                    }
                    />)}
                </Accordion>
                <Accordion title={"Невыполненные"}>
                    {subtasks.filter(elem => elem.status === 'uncompleted' && elem.task_id === taskId).map(elem => <Task
                        {...elem} key={elem.id} />)}
                </Accordion>
                <Accordion title={"Выполненные"}>
                    {subtasks.filter(elem => elem.status === 'completed' && elem.task_id === taskId).map(elem => <Task
                        {...elem} key={elem.id}/>)}
                </Accordion>

            <ModalView text={"Выполнена подзадача?"} isVisible={modalVisible} setIsVisible={setModalVisible}>
                <ModalButtonSuccess text={"Да"} onPress={() => Api.completeSubTask(subtaskId).then(() =>setModalVisible(false)).then(() => revalidateHandler())} />
                <ModalButtonError text={"Нет"} onPress={() => setModalVisible(false)}/>
            </ModalView>

        </ScrollView>

    )
}





export default SubTask;