import * as React from 'react';
import { useState } from 'react';
import { Button, View, Text, SectionList, Image, TouchableOpacity, ScrollView} from 'react-native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem} from '@react-navigation/drawer';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaView } from 'react-native';
import { BottomSheet } from 'react-native-btr';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import DashboardScreen from '../home';
import styles from './style';
import { MaterialDatetimePickerAndroid } from 'react-native-material-datetime-picker';
import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
import RNMaterialDatetimePicker from 'react-native-material-datetime-picker';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import WishlistsScreen from '.';

const logo = require ('../../images/pic.png');
const cutlery = require ('../../images/cutlery.png');
const card = require ('../../images/credit-card.png');
const salary = require ('../../images/salary.png');
const motor = require('../../images/car.png');
const wallet = require ('../../images/wallet.png');
const cash = require ('../../images/money.png');
const cart = require ('../../images/shoppingcart.png');
const health = require ('../../images/firstaidkit.png');
const sale = require ('../../images/sale.png');
const awards = require ('../../images/medal.png');
const less = require ('../../images/less.png');
const greater = require('../../images/greater.png');
const calendar = require('../../images/calendar.png');
const plus = require ('../../images/plus.png');
const acc = require ('../../images/acc.png');
const tag = require ('../../images/tag.png');
const clear = require ('../../images/clear.png');
const drop = require ('../../images/drop.png');
const goalcolor = require('../../images/roundedrectangle.png');
const caricon = require ('../../images/caricon.png');
const Stack = createNativeStackNavigator();
const onPress = ()=>console.log('press');

const EditWishlists =()=> {

  const [name, onChangeName] = React.useState(null);
  const [note, onChangeNote] = React.useState(null);
  const [targetAmount, onChangeTargetAmount] = React.useState(null);
  const [amountSaved, onChangeAmountSaved] = React.useState(null);

  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => {
    console.warn("A date has been picked: ", date);
    hideDatePicker();
  };
    return (
        <View style = {{backgroundColor:'white', height:'100%'}}>
            <View style={{marginHorizontal:20, marginTop:20}}>
              <Text>Name</Text>
              <TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 0}} onChangeName={onChangeName} value={name}  placeholder="" placeholderTextColor={'grey'} fontSize={20}/>

                 <View style={styles.dividerLine}></View>
                   <Text style = {styles.text}>Target amount</Text>
                       <View style={{flexDirection:'row'}}>
                       <TextInput style={{marginTop:3, fontSize:15}} onChangeTargetAmount={onChangeTargetAmount} value={targetAmount}  placeholder="0" placeholderTextColor={'grey'} keyboardType="numeric" fontSize={20}/>
                       </View>

                 <View style={styles.dividerLine}></View>
                  <Text style={styles.text}>Amount saved </Text>
                       <View style={{flexDirection:'row'}}>
                       <TextInput style={{marginTop:3, fontSize:15}} onChangeAmountSaved={onChangeAmountSaved} value={amountSaved}  placeholder="0" placeholderTextColor={'grey'} keyboardType="numeric" fontSize={20}/>
                       </View>

                <View style={styles.dividerLine}></View>
                  <Text style={styles.text}>Desired date </Text>
                      <View style={{flexDirection:'row'}}>
                         <Text style= {styles.textInput}>31 Oct 2022</Text>
                         <Image style={{width:10, height:10, marginHorizontal:235, marginTop:15}} source={drop}></Image>
                       </View>

                <View style={styles.dividerLine}></View>
                    <View style={{flexDirection:'row'}}> 
                       <Text style={styles.text}>Goal color</Text>
                       <Text style={[styles.text,{marginHorizontal:150}]}>Icon</Text>
                    </View>

              <View style={{backgroundColor:'pink', height:35, width:95, borderRadius:5, marginTop:15, flexDirection:'row', marginBottom:10}}>
                <Image style={{width:10, height:10, marginHorizontal:110, marginTop:15}} source={drop}></Image>
                <Image style={{width:35, height:35, marginTop:1}} source={caricon}></Image>
              </View>

              <View style={{flexDirection:'row'}}>
                <View style={[styles.dividerLine1,{marginHorizontal:0}]}></View>
                <View style={[styles.dividerLine2,{marginHorizontal:60}]}></View>
              </View>
              
                  <Text style={styles.text}>Note </Text>
                  <TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 0}} onChangeNote={onChangeNote} value={note}  placeholder="-" placeholderTextColor={'grey'} fontSize={20}/>
                  <View style={styles.dividerLine}></View>
             </View>

                  <View style={{flexDirection:'row'}}>
                     <TouchableOpacity style={styles.saveButton}>
                        <Text style={{color:'white', fontWeight:'bold'}}>ADD</Text>
                     </TouchableOpacity>
                  </View>
        </View>
      
    );
};

export default EditWishlists;