import Layout from "../components/screens/layout";
import {Pressable, Text, View} from "react-native";
import Chevron from "../assets/bi_chevron.svg"
import {useEffect, useState} from "react";
import Button from "../components/button";
import {useNavigation, useRoute} from "@react-navigation/native";
import {useSnapshot} from "valtio";
import EventStore, {getEvents} from "../store/eventStore";
import Api from "../services/api";



const EventSelect = ({selected, setSelected}) => {
    const {events} = useSnapshot(EventStore)
    const [isOpened, setIsOpened] = useState(false);
    const navigation = useNavigation()

   return (

       <View style={{marginBottom: 16}}>

           <Pressable onPress={() => setIsOpened(!isOpened)}>
               <View style={{
                   backgroundColor: "#EAEAEA",
                   borderRadius: 20,
                   borderBottomLeftRadius: isOpened ? 0 : 20,
                   borderBottomRightRadius: isOpened ? 0 : 20,
                   borderStyle: "solid",
                   borderBottomColor: "rgba(0,0,0,0.2)",
                   borderBottomWidth: isOpened ? 1 : 0,
                   paddingTop: 16,
                   paddingBottom: 16,
                   paddingLeft: 20,
                   paddingRight: 20,
                   display: "flex",
                   flexDirection: "row",
                   justifyContent: "space-between",
               }}>
                   <Text style={{fontSize: 16}}>{selected.title}</Text>
                   <Chevron/>
               </View>
           </Pressable>

           {isOpened && events.map(event => (
               <Pressable onPress={() => {setSelected(event); setIsOpened(false)}} key={event.id}>
                   <View style={{
                       backgroundColor: "#EAEAEA",
                       paddingRight: 20,
                       paddingTop: 16,
                       paddingBottom: 16,
                       paddingLeft: 20,
                       borderBottomColor: "rgba(0,0,0,0.2)",
                       borderBottomWidth: 1,
                   }}>
                       <Text>{event.title}</Text>
                   </View>
               </Pressable>
           ))}
       </View>
   )
}
const InputScreen = ({title, content}) => {

    const {taskId} = useRoute().params
    const [selected, setSelected] = useState({})
    const navigation = useNavigation()
    return (
        <Layout title={title}>

            <View style={{padding: 20}}>
                <Text style={{
                    fontSize: 20,
                    fontWeight: 'bold',
                    marginBottom: 16
                }}>{content || "Добавьте новое событие"}</Text>


                <EventSelect selected={selected} setSelected={setSelected}/>

                <Button text={"Добавить"} onPress={() => {
                    Api.createNewEvent({task_id: taskId, event_id: selected.id})
                        .then(() => getEvents()).then(navigation.navigate('Event', {id: taskId}))
                }} />

            </View>
        </Layout>
    )
}
export default InputScreen