import {StyleSheet, Platform, ScrollView, SafeAreaView, View, StatusBar, Text} from 'react-native';
// @ts-ignore
import CalendarPicker from 'react-native-calendar-picker';

import {ThemedText} from '@/components/ThemedText';
import {ThemedView} from '@/components/ThemedView';
import {Colors} from '@/constants/Colors';
import {useColorScheme} from '@/hooks/useColorScheme';
import React from 'react';
import Ionicons from '@expo/vector-icons/Ionicons';

export default function HomeScreen() {
  const colorScheme = useColorScheme() ?? 'light';

  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}}>Maarten</ThemedText>
          </ThemedView>

          <ThemedView style={styles.calendarContainer}>
            <CalendarPicker
              showDayStragglers={true}
              enableDateChange={false}
              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}>
            <View style={styles.legendaItem}>
              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].green}}/>
              <ThemedText type="default">GFT+e</ThemedText>
            </View>
            <View style={styles.legendaItem}>
              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].paper}}/>
              <ThemedText type="default">Papier</ThemedText>
            </View>
            <View style={styles.legendaItem}>
              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].packages}}/>
              <ThemedText type="default">PMD</ThemedText>
            </View>
            <View style={styles.legendaItem}>
              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].grey}}/>
              <ThemedText type="default">Restafval</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: 25,
    flex: 1,
    flexDirection: 'row',
    alignContent: 'center',
    gap: 10,
  },
  legendaItem: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    flexGrow: 1,
  },
  circle: {
    width: 25,
    height: 25,
    borderRadius: 50,
  },
});