import Accordion from "../components/acordion";
import Task from "../components/task";
import {LayoutScrollView} from "../components/screens/layout";
import {useSnapshot} from "valtio";

import TaskStore, {getTasks} from "../store/taskStore";
import {useNavigation} from "@react-navigation/native";
import {useEffect} from "react";


const Home = ({navigation}) => {

    const navi = useNavigation()

    useEffect(() => {
        navi.addListener('focus', () => {
            TaskStore.newTaskBadge = 0
        })
    }, []);

    const {tasks} = useSnapshot(TaskStore)



    return (
        <LayoutScrollView title={"Задачи"}>
            <Accordion title={"Активные задания"} style={{marginBottom: 20}}>
                {tasks.filter(elem => elem.status === 'active').map(elem => <Task navigation={navigation}
                                                                                  imageType={'chevron'} {...elem}
                                                                                  onPress={() => navigation.navigate('Event', {id: elem.id})}
                                                                                  key={elem.id}/>)}
            </Accordion>
            <Accordion title={"Архивные задания"}>
                {tasks.filter(elem => elem.status === 'completed').map(elem => <Task navigation={navigation}
                                                                                     imageType={'chevron'} {...elem}
                                                                                     key={elem.id}/>)}
            </Accordion>
        </LayoutScrollView>
    )
}

export default Home;