Untitled

import { useEffect, useState } from "react";
import { Picker } from "@react-native-picker/picker";
import { Modal, View, ScrollView, Text, TextInput, TouchableOpacity } from "react-native";
import axios from "axios";

const AddInvoiceModal = ({ isAddModalVisible, closeAddInvoiceModal, handleAddInvoice, newInvoice, setNewInvoice, styles }) => {
  const [clients, setClients] = useState([]);

  useEffect(() => {
    axios.get("/api/clients/")
      .then(response => setClients(response.data))
      .catch(error => console.error("Error fetching clients:", error));
  }, []);

  return (
    <Modal visible={isAddModalVisible} animationType="slide" transparent>
      <View style={styles.modalContainer}>
        <ScrollView style={styles.modalContent}>
          <Text style={styles.modalTitle}>Add New Invoice</Text>
          
          {/* Client Selection */}
          <Picker
            selectedValue={newInvoice.client_id}
            onValueChange={(itemValue) => setNewInvoice({ ...newInvoice, client_id: itemValue })}
            style={styles.underlinedInput}
          >
            <Picker.Item label="Select Client" value="" />
            {clients.map(client => (
              <Picker.Item key={client.id} label={client.company_name} value={client.id} />
            ))}
          </Picker>
          
          {/* Invoice Details */}
          <Text style={styles.itemsTitle}>Items:</Text>
          {newInvoice.items.map((item, index) => (
            <View key={index} style={styles.itemInput}>
              <TextInput
                placeholder="Item Name *"
                style={styles.underlinedInput}
                value={item.name}
                onChangeText={(text) => {
                  const updatedItems = [...newInvoice.items];
                  updatedItems[index].name = text;
                  setNewInvoice({ ...newInvoice, items: updatedItems });
                }}
              />
              <TextInput
                placeholder="Price *"
                style={styles.underlinedInput}
                value={item.price ? item.price.toString() : ""}
                onChangeText={(text) => {
                  const updatedItems = [...newInvoice.items];
                  updatedItems[index].price = parseFloat(text) || 0;
                  setNewInvoice({ ...newInvoice, items: updatedItems });
                }}
              />
              <Picker
                selectedValue={item.type}
                onValueChange={(itemValue) => {
                  const updatedItems = [...newInvoice.items];
                  updatedItems[index].type = itemValue;
                  setNewInvoice({ ...newInvoice, items: updatedItems });
                }}
                style={styles.underlinedInput}
              >
                <Picker.Item label="Select Type" value="" />
                <Picker.Item label="Service" value="service" />
                <Picker.Item label="Product" value="product" />
              </Picker>
              <TextInput
                placeholder="Quantity *"
                style={styles.underlinedInput}
                value={item.quantity ? item.quantity.toString() : ""}
                onChangeText={(text) => {
                  const updatedItems = [...newInvoice.items];
                  updatedItems[index].quantity = parseInt(text) || 0;
                  setNewInvoice({ ...newInvoice, items: updatedItems });
                }}
              />
              <TextInput
                placeholder="Tax Rate *"
                style={styles.underlinedInput}
                value={item.taxes ? item.taxes.toString() : ""}
                onChangeText={(text) => {
                  const updatedItems = [...newInvoice.items];
                  updatedItems[index].taxes = parseFloat(text) || 0;
                  setNewInvoice({ ...newInvoice, items: updatedItems });
                }}
              />
              <TouchableOpacity
                onPress={() => {
                  const updatedItems = newInvoice.items.filter((_, idx) => idx !== index);
                  setNewInvoice({ ...newInvoice, items: updatedItems });
                }}
                style={styles.removeItemButton}
              >
                <Text style={styles.buttonText}>Remove Item</Text>
              </TouchableOpacity>
            </View>
          ))}
          
          <TouchableOpacity
            onPress={() => {
              setNewInvoice({
                ...newInvoice,
                items: [...newInvoice.items, { name: "", price: 0, type: "", quantity: 0, taxes: 0 }],
              });
            }}
            style={styles.addItemButton}
          >
            <Text style={styles.buttonText}>Add Item</Text>
          </TouchableOpacity>
          
          <View style={styles.modalButtons}>
            <TouchableOpacity onPress={closeAddInvoiceModal} style={styles.cancelButton}>
              <Text style={styles.buttonText}>Cancel</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={handleAddInvoice} style={styles.addInvoiceButton}>
              <Text style={styles.buttonText}>Add Invoice</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    </Modal>
  );
};

export default AddInvoiceModal;