import React from 'react';
import { Grid } from '@mui/material';
import ShipmentPanel from './ShipmentPanel.tsx';
import ShipmentDetails from './ShipmentDetails.tsx';
import ShipmentForm from './ShipmentForm.tsx';
import ParentComponent from "./ParentComponent.tsx";
import { Shipment, Dewar } from '../types.ts';
import { ContactPerson, Address, Proposal } from '../types.ts';


const ShipmentView: React.FC<ParentComponent> = ({
                                                   newShipment,
                                                   setNewShipment,
                                                   isCreatingShipment,
                                                   setIsCreatingShipment,
                                                   selectedShipment,
                                                   selectShipment,
                                                   selectedDewar,
                                                   setSelectedDewar,
                                                   handleSaveShipment,
                                                   contactPersons,
                                                   returnAddresses,
                                                   proposals,
                                               }) => {
    return (
        <Grid container spacing={2} sx={{ height: '100vh' }}>
            {/* Left column: ShipmentPanel */}
            <Grid
                item
                xs={12}
                md={3}
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    flexGrow: 0,
                }}
            >
                <ShipmentPanel
                    selectedPage="Shipments"
                    setIsCreatingShipment={setIsCreatingShipment}
                    newShipment={newShipment}
                    setNewShipment={setNewShipment}
                    selectShipment={selectShipment}
                />
            </Grid>

            {/* Right column: ShipmentForm or ShipmentDetails */}
            <Grid
                item
                xs={12}
                md={9}
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    flexGrow: 1,
                }}
            >
                {isCreatingShipment ? (
                    <ShipmentForm
                        newShipment={newShipment}
                        setNewShipment={setNewShipment}
                        handleSaveShipment={handleSaveShipment}
                        contactPersons={contactPersons}
                        proposals={proposals}
                        returnAddresses={returnAddresses}
                        sx={{ flexGrow: 1 }} // Allow form to grow and take available space
                    />
                ) : (
                    <ShipmentDetails
                        selectedShipment={selectedShipment}
                        setSelectedDewar={setSelectedDewar}
                        isCreatingShipment={isCreatingShipment}
                        newShipment={newShipment}
                        setNewShipment={setNewShipment}
                        handleSaveShipment={handleSaveShipment}
                        contactPersons={contactPersons}
                        proposals={proposals}
                        returnAddresses={returnAddresses}
                        sx={{ flexGrow: 1 }} // Allow details to grow and take available space
                    />
                )}
            </Grid>
        </Grid>
    );
};

export default ShipmentView;