import React from 'react'
import { Image, Text, View, ViewProps } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { MARGINS, SIZES } from '../../constants/theme'
import { useTheme } from '../../app/contexts/ThemeContext'

type WelcomeProps = ViewProps & {name: string, image : any, onPress: () => void | undefined}

function formatDate(date: Date) : string {
  const day = String(date.getDate()).padStart(2, '0')
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const year = String(date.getFullYear())
  return `${day}.${month}.${year}`
}

function getTimeOfDay(date: Date) : string {
  const hour = date.getHours()
  if(hour < 12){
    return "morning"
  } else if(hour >= 12 && hour < 18){
    return "afternoon"
  } else if(hour >= 18){
    return "evening"
  }
  return "day"
}



export default function Welcome(props: WelcomeProps) {
  const { colors } = useTheme();

  const date = new Date()
  const dateString = formatDate(date)
  const timeOfDay = getTimeOfDay(date)
  const onpress = props.onPress


  return (
    <View style={{
      marginVertical: 20,
      marginHorizontal: MARGINS.normal,
      //backgroundColor: backgroundColor,
    }}>
      <View style={{
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between"
      }}>
        <TouchableOpacity onPress={onpress}>
          <Image style={{
            height: 60,
            width: 60,
            borderRadius: 200,
            
          }} source={props.image} height={60} width={60} resizeMode='cover'></Image>
        </TouchableOpacity>
        <Text style={{
          fontSize: SIZES.xlarge,
          color: colors.primaryText
        }}>{dateString}</Text>
      </View>
      <View style={{
        paddingTop: 10,
      }}>
        <Text style={{
          fontSize: SIZES.xlarge,
          color: colors.primaryText
        }}>Good {timeOfDay}, {props.name}</Text>
        </View>
    </View>
  )
}