import {Text, View, StyleSheet, TextInput, Button, Alert} from "react-native";
import {Redirect, router, Stack} from "expo-router";
import {useState} from "react";
import Feather from '@expo/vector-icons/Feather';
import {useAuth} from "../../providers/AuthProvider";
import {supabase} from "../../lib/supabase";

export default function CreatePoll() {
    const [question, setQuestion] = useState('');
    const [options, setOptions] = useState(['', '']);
    const [error, setError] = useState()
    const {session, user} = useAuth();

    const createPoll = () => {
        // @ts-ignore
        setError("");
        if (!question) {
            // @ts-ignore
            setError("Please enter a question");
            return;
        }
        const validOptions = options.filter(o => !! o)
        if (validOptions.length < 2) {
            // @ts-ignore
            setError("Please provide at least 2 valid options")
            return;
        }

        const { data, error } = await supabase
            .from('polls')
            .insert([
                { question, options },
            ])
            .select()

        if (error) {
            // @ts-ignore
            setError(error.message);
            return;
        }


        router.back();

        console.warn("create")
    }

    if (!user) {
        return <Redirect href={"/profile"}/>;
    }

    return (
        <View style={styles.container}>
            <Stack.Screen options={{title: 'Create poll'}}/>

            <Text style={styles.label}>Title</Text>
            <TextInput value={question} onChangeText={setQuestion} placeholder='Type your question here' style={styles.input}/>

            <Text style={styles.label}>Options</Text>

            {options.map((option, index) => (
                <View key={index} style={{justifyContent: 'center'}}>
                    <TextInput
                        value={option}
                        onChangeText={(text ) => {
                            const updated = [...options];
                            updated[index] = text;
                            setOptions(updated);
                        }}
                        placeholder={`Option ${index + 1}`}
                        style={styles.input}
                    />
                    <Feather
                        name="x"
                        size={22}
                        color="black"
                        onPress={() => {
                            const updated = [...options];
                            updated.splice(index, 1);
                            setOptions(updated);
                        }}
                        style={{
                            position: 'absolute',
                            right: 10,
                    }}
                    />
                </View>
            ))}
            <Button
                title='Add Option'
                onPress={() => setOptions([...options, ''])}
            />

            <Button title='Create Poll' onPress={createPoll}/>
            <Text style={styles.labelError}>{error}</Text>
        </View>
    );
}

const styles = StyleSheet.create ({
    container: {
        padding: 10,
        gap: 5,
    },
    label: {
        fontSize: 18,
        marginTop: 7,
    },
    input: {
        borderWidth: 1,
        borderColor: '#ddd',
        backgroundColor: 'white',
        padding: 10,
        marginBottom: 7.5,
        borderRadius: 5,
        fontSize: 16,
    },
    labelError: {
        color:'crimson',
        fontSize: 14,
    }

})