import React, {useState} from 'react';
import {View, Text, StyleSheet, TextInput, TouchableOpacity, FlatList, Keyboard} from 'react-native';
import {Ionicons} from "@expo/vector-icons";
import {useDB} from "../context/DBcontex";

export const NewListScreen = ({navigation}) => {
    const colors = ["#983b97", "#f7cb22", "#8190ed", "#6078db", "#94604f", "#28594e", "#c66e6b", "#fbfbfb", "#254a77", "#228038", "#857c3c", "#fb6383", "#a56782", "#b1442c", "#e43c5e", "#8da7a5"]

    const [color, setColor] = useState(colors[3])
    const [listName, setListName] = useState('')

    const {newList} = useDB();

    const submit = async () => {
        if(listName !== '') {
            const data = {
                title: listName,
                createdAt: new Date(),
                color: color,
            }
            setListName('')
            setColor(colors[3])
            Keyboard.dismiss()
            await newList(data)
            navigation.goBack()
        }
    }

    const OneColor = ({color}) => {
        return (
            <TouchableOpacity style={{
                marginEnd: 10,
                borderRadius: 10,
                overflow: 'hidden'
            }} onPress={() => setColor(color)}>
                <View style={{backgroundColor: color, width: 70, height: 70}}/>
            </TouchableOpacity>
        );
    }

    const renderItem = ({item}) => (
        <OneColor color={item}/>
    );

    return (
        <View style={styles.container}>
            <View style={{flex: 1}}>
                <Text style={styles.header}>Create New TodoList</Text>

                <View style={styles.flatList}>
                    <FlatList data={colors}
                              renderItem={renderItem}
                              keyExtractor={color => color}
                              showsHorizontalScrollIndicator={false}
                              horizontal
                    />
                </View>

                <View style={[styles.colorSquare, {backgroundColor: color}]}>
                    <Text style={{fontSize: 20, fontWeight: 'bold'}}>{color}</Text>
                </View>
            </View>

            <View style={styles.inputWrapper}>
                <TextInput
                    style={[styles.inputText]}
                    placeholder="Enter the new list name"
                    placeholderTextColor="grey"
                    onChangeText={(text) => setListName(text)}
                    value={listName}/>
                <TouchableOpacity style={styles.iconButton} onPress={() => submit()}>
                    <Ionicons name="add-outline" size={41} color="pink"/>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    colorSquare: {
        borderRadius: 10,
        width: 350,
        height: 150,
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center'
    },
    iconButton: {
      backgroundColor: 'grey',
    },
    inputText: {
        flex: 1,
        paddingLeft: 10,
        fontSize: 20,
        color: '#eae1db'
    },
    inputWrapper: {
        borderWidth: 2,
        borderRadius: 10,
        borderColor: 'grey',
        flexDirection: 'row',
        marginHorizontal: 30,
        marginVertical: 10,
        overflow: 'hidden'
    },
    flatList: {
        marginHorizontal: 30,
        marginVertical: 40
    },
    header: {
        alignSelf: 'center',
        fontSize: 30,
        fontWeight: 'bold',
        marginTop: 20,
        color: '#53abbf'
    },
    container: {
        flex: 1,
        backgroundColor: '#14141c'
    },
})