import React, { useState } from 'react';
import { StyleSheet, TouchableOpacity, View, TextInput } from 'react-native';
import themeColors from '../assets/colors';
import { MaterialIcons} from "@expo/vector-icons";
export const AppAddBid = (props) => {
  const [bid, setBid] = useState('');
  const handleChange = (val) => {
    setBid(val);
  }
  return(
    <View style={styles.bidContainer}>
      <TextInput
      style={styles.input}
      keyboardType='number-pad'
      placeholder='Enter bid'
      onChangeText={(val) => handleChange(val)}/>
      <TouchableOpacity onPress={() => props.onPress(bid)} style={styles.bid}>
        <MaterialIcons name="add" size={16} color={themeColors.WHITE} />
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  bidContainer: {
    flex: 1,
    marginVertical: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: themeColors.TERTIARY_COLOR,
    maxHeight: 50
  },
  bid:{
    alignItems: "center",
    padding: 8,
    backgroundColor: themeColors.PRIMARY_COLOR,
    borderRadius: 20,
    shadowColor: 'rgba(0,0,0, .4)',
    shadowOffset: { height: 2, width: 1 },
    shadowOpacity: 1,
    shadowRadius: 1,
    elevation: 2,
    height: 33
  },
  input:{
    alignItems: "center",
    padding: 10,
    fontSize: 16,
    width: '80%'
  }
});

