import { Image, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'
import React, { useState } from 'react'
import { AntDesign } from '@expo/vector-icons';
import { BottomModal, ModalContent, ModalTitle, SlideAnimation } from 'react-native-modals';

const index = () => {
  const todo = [];
  const [modalVisible, setModalVisible] = useState(false);
  const [addToDo, setAddToDo] = useState('');

  return (
    <>
      <View style={{marginHorizontal:20, marginVertical:20, alignItems: "center", flexDirection: "row", gap: 10}}>
        <Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center"}}>
          <Text style={{color: "white", textAlign: "center"}}>All</Text>
        </Pressable>
        <Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center"}}>
          <Text style={{color: "white", textAlign: "center"}}>Work</Text>
        </Pressable>
        <Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center", marginRight: "auto"}}>
          <Text style={{color: "white", textAlign: "center"}}>Personal</Text>
        </Pressable>
        <Pressable onPress={() => setModalVisible(!modalVisible)}>
          <AntDesign name="plus" size={24} color="black" />
        </Pressable>
      </View>
      <ScrollView style={{flex:1, backgroundColor: "white"}}>
          <View style={{padding: 10}}>
            {todo?.length > 0 ? (
              <View></View>
            ) : (
              <View style={{flex:1, justifyContent:"center", alignItems:"center", marginTop:150, marginLeft:"auto", marginRight:"auto"}}>
                <Image 
                style={{width: 100, height: 100, resizeMode: "containe"}}
                source={{
                  uri:"./assets/images/to-do.png",
                }}
                />
                <Text style={{fontSize:16, fontWeight:600, marginTop: 20, textAlign:"center"}}>Hooray! There is no tasks</Text>
                <Pressable onPress={() => setModalVisible(!modalVisible)} style={{backgroundColor: "black", marginTop: 20, padding:5, borderRadius: 5}}>
                  <Text style={{fontSize:14, fontWeight:600, textAlign:"center", color: "white"}}>Add task <AntDesign name="plus" size={16} color="white" /></Text>
                </Pressable>
              </View>
            )}
          </View>
      </ScrollView>
      
      <BottomModal 
      onBackdropPress={() => setModalVisible(!modalVisible)} 
      onHardwareBackPress={() => setModalVisible(!modalVisible)}
      swipeDirection={['up', 'down']}
      swipeThreshold={200}
      modalTitle={<ModalTitle title="Add Task"/>}
      modalAnimation={
        new SlideAnimation({
          slideFrom: 'bottom',
        })
      }
      visible={modalVisible}
      onTouchOutside={() => setModalVisible(!modalVisible)}
      >
        <ModalContent style={{width:"100%", height:200}}>
          <View style={{marginTop: 10}}>
            <TextInput value={addToDo} onChangeText={(text) => setAddToDo(text)} style={{padding:10, borderColor: "#61677A", borderRadius:5, borderWidth:1, flex:1, outlineStyle: 'none', color: "#31363F"}} placeholder='Add your new task'/>
          </View>
        </ModalContent>
      </BottomModal>
    </>
  )
}

export default index

const styles = StyleSheet.create({})