import React from 'react';
import { StyleSheet, Button, TextInput, View, Text } from 'react-native';
import { globalStyles } from '../styles/global.js'
import { Formik } from 'formik';
import * as yup from 'yup';

const ReviewSchema = yup.object({
    date: yup.string() //string만 받는다
        .required()  //아무것도 입력안했하면 안받음
        .min(4),  //최소4글짜
    person: yup.string()
        .required()
        .min(2),
    money: yup.string()
        .required(),
        
    remained_money: yup.string()
        .required()
})




export default function InfoForm({ addInfo }) {
    return (
        <View style={globalStyles.container} >
            <Formik
                initialValues={{ date: '', person: '', money: '', remained_money: '' }}
                validationSchema={ReviewSchema}
                onSubmit={(values) => {//위의 4개의 val들을 전달

                    addInfo(values);
                }}

            >
                {(props) => (
                    <View>
                        <TextInput
                            style={globalStyles.input}
                            placeholder='날짜'
                            onChangeText={props.handleChange('date')} //우리가 바꾸려는 val
                            value={props.values.date}
                        />
                         
                        <TextInput
                            style={globalStyles.input}
                            placeholder='누구에게'
                            onChangeText={props.handleChange('person')}
                            value={props.values.person}
                        />

                        <TextInput
                            style={globalStyles.input}
                            placeholder='금액'
                            onChangeText={props.handleChange('money')}
                            value={props.values.money}
                            keyboardType='numeric'
                        />

                        <TextInput
                            style={globalStyles.input}
                            placeholder='남은 금액'
                            onChangeText={props.handleChange('remained_money')}
                            value={props.values.remained_money}
                            keyboardType='numeric'
                        />

                        <Button title='입력' color='maroon' onPress={props.handleSubmit} />
                    </View>
                )}

            </Formik>

        </View >
    )
}