import React, { useEffect, useState } from 'react';
import { StyleSheet, ScrollView, SafeAreaView, View, StatusBar } from 'react-native';
// @ts-ignore
import CalendarPicker from 'react-native-calendar-picker';
import Ionicons from '@expo/vector-icons/Ionicons';

import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { useToken } from '@/context/AppProvider';
import { Request } from '@/services/request';
import List from '@/components/List';
import { useIsFocused } from '@react-navigation/core';
import { useSelector } from 'react-redux';

export default function HomeScreen() {
    const colorScheme = useColorScheme() ?? 'light';
    const isFocused = useIsFocused();
    const session = useSelector((state: any) => state.data.session);
    const reloadCalendar = useSelector((state: any) => state.data.reloadCalendar);
    const { token, isLoading } = useToken();
    const [ name, setName ] = useState( ' ' ); // Default empty space to prevent layout shifting
    const [ dates, setDates ] = useState<any | null>( [] );
    const [ types, setTypes ] = useState<any | null>( [] );

    // Load session
    useEffect( () => {
        setName(session.name);
    }, [session, isFocused]);

    useEffect( () => {
        if (token) {
            loadCalendar();
        }
    }, [ reloadCalendar, isFocused ] );

    // Load calendar data
    const loadCalendar = () => {
        Request.post( 'calendar', { token: token } ).then( (response) => {
            if (response.success) {
                // Set dates
                let calendarDates: any[] = [];
                response.dates.forEach( (date: any) => {
                    calendarDates.push( {
                        date: new Date( date.date ),
                        style: { backgroundColor: date.color },
                        textStyle: { color: Colors.white },
                        allowDisabled: true,
                    } )
                } )
                setDates( calendarDates );

                // Set types
                setTypes( response.types );
            }
        } )
    }

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background, }}>
            <ThemedView style={styles.container}>
                <ScrollView>
                    <ThemedView style={styles.titleContainer}>
                        <ThemedText type="title">{getGreeting()},</ThemedText>
                    </ThemedView>

                    <ThemedView style={styles.titleContainer}>
                        <ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>{name}</ThemedText>
                    </ThemedView>

                    <ThemedView style={styles.calendarContainer}>
                        <CalendarPicker
                            showDayStragglers={true}
                            enableDateChange={false}
                            customDatesStyles={dates}
                            todayTextStyle={styles.today}
                            previousComponent={
                                <Ionicons size={28} name="chevron-back"/>
                            }
                            nextComponent={
                                <Ionicons size={28} name="chevron-forward"/>
                            }
                            weekdays={[ "Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat" ]}
                            months={[
                                "Januari",
                                "Februari",
                                "Maart",
                                "April",
                                "Mei",
                                "Juni",
                                "Juli",
                                "Augustus",
                                "September",
                                "Oktober",
                                "November",
                                "December",
                            ]}
                        />
                    </ThemedView>

                    <ThemedView style={styles.legendaContainer}>
                        <ThemedText type='subtitle'>Legenda:</ThemedText>
                        <List
                            data={types}
                            viewStyle={styles.legendaList}
                            renderItem={(type: any, index: any) => (
                                <View style={styles.legendaItem} key={index}>
                                    <View style={{ ...styles.circle, backgroundColor: type.color }}/>
                                    <ThemedText type="default">{type.name}</ThemedText>
                                </View>
                            )}
                        />
                    </ThemedView>
                </ScrollView>
            </ThemedView>
        </SafeAreaView>
    );
}

function getGreeting() {
    const myDate = new Date();
    const hours = myDate.getHours();

    if (hours < 12) {
        return 'Goedemorgen';
    } else if (hours >= 12 && hours <= 17) {
        return 'Goedemiddag';
    } else if (hours >= 17 && hours <= 24) {
        return 'Goedenavond';
    }

    return 'Hallo';
}

const styles = StyleSheet.create( {
    container: {
        padding: 25,
        marginTop: StatusBar.currentHeight,
    },
    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 8,
        paddingBottom: 8,
    },
    calendarContainer: {
        marginTop: 15,
    },
    legendaContainer: {
        marginTop: 40,
    },
    legendaList: {
        marginTop: 15,
        flex: 1,
        flexDirection: 'column',
        alignContent: 'center',
        gap: 15,
    },
    legendaItem: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        gap: 8,
        flexGrow: 1,
    },
    circle: {
        width: 25,
        height: 25,
        borderRadius: 50,
    },
    today: {
        borderWidth: 3,
        borderColor: Colors.dark.grey,
        borderRadius: 25,
        textAlign: 'center',
        paddingTop: 8,
        width: 40,
        height: 40,
    },
} );