import { View, Text, StyleSheet, TouchableOpacity, TouchableOpacityProps } from 'react-native'
import React, { useState } from 'react'
import { useTheme } from '../../app/contexts/ThemeContext';
import { SIZES } from '../../constants/theme';
import { SimpleDate } from '../../util/SimpleDate';
import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';

interface DateSelectorProps extends ViewProps {
  onPress?: ()=>void | undefined;
  selectedDate: Date
}

const DateSelectorButton:React.FC<DateSelectorProps> = (props: DateSelectorProps) => {
  const {onPress, selectedDate, ...restProps} = props;
  const {colors} = useTheme();

  return (
    <TouchableOpacity onPress={onPress} {...restProps} style={[styles.inputContainer, {backgroundColor: colors.elementDefaultColor}]}>
      <Text style={[styles.text, {color: colors.primaryText}]}>Date:</Text>
      <Text style={[styles.text, {color: colors.primaryText}]}>{new SimpleDate(selectedDate).format("DD.MM.YYYY")}</Text>
    </TouchableOpacity>
  )
}
const styles = StyleSheet.create({
  inputContainer: {
    minHeight: 50,
    borderRadius: 20,
    flexDirection: "row",
    justifyContent: 'space-between',
    alignItems: "center"
  },
  text:{
    fontSize: SIZES.large,
    marginHorizontal: 15,
  },
})

export default DateSelectorButton