import React, { useState, useEffect } from 'react';
import ShipmentPanel from '../components/ShipmentPanel';
import ShipmentDetails from '../components/ShipmentDetails';
import ShipmentForm from '../components/ShipmentForm';
import { Dewar, OpenAPI, Shipment } from '../../openapi';
import useShipments from '../hooks/useShipments';
import { Grid, Container } from '@mui/material';

type ShipmentViewProps = React.PropsWithChildren<Record<string, never>>;

const ShipmentView: React.FC<ShipmentViewProps> = () => {
    const { shipments, error, defaultContactPerson, fetchAndSetShipments } = useShipments();
    const [selectedShipment, setSelectedShipment] = useState<Shipment | null>(null);
    const [selectedDewar, setSelectedDewar] = useState<Dewar | null>(null);
    const [isCreatingShipment, setIsCreatingShipment] = useState(false);

    useEffect(() => {
    const isTestEnv = import.meta.env.MODE === 'test';
    OpenAPI.BASE = isTestEnv
        ? import.meta.env.VITE_OPENAPI_BASE_TEST
        : import.meta.env.VITE_OPENAPI_BASE_DEV;
    fetchAndSetShipments();
}, []);

    const handleSelectShipment = (shipment: Shipment | null) => {
        setSelectedShipment(shipment);
        setIsCreatingShipment(false);
    };

    const handleCancelShipmentForm = () => {
        setIsCreatingShipment(false);
    };

    const renderShipmentContent = () => {
        if (isCreatingShipment) {
            return (
                <ShipmentForm
                    sx={{ flexGrow: 1 }}
                    onCancel={handleCancelShipmentForm}
                    refreshShipments={fetchAndSetShipments}
                />
            );
        }
        if (selectedShipment) {
            return (
                <ShipmentDetails
                    isCreatingShipment={isCreatingShipment}
                    sx={{ flexGrow: 1 }}
                    selectedShipment={selectedShipment}
                    selectedDewar={selectedDewar}
                    setSelectedDewar={setSelectedDewar}
                    setSelectedShipment={setSelectedShipment}
                    refreshShipments={fetchAndSetShipments}
                    defaultContactPerson={defaultContactPerson}
                />
            );
        }
        return <div>No shipment details available.</div>;
    };

    return (
        <Container maxWidth={false} disableGutters sx={{ display: 'flex', height: '100vh' }}>
            <Grid container spacing={2} sx={{ height: '100vh' }}>
                <Grid
                    item
                    xs={12}
                    md={3}
                    sx={{
                        display: 'flex',
                        flexDirection: 'column',
                        flexGrow: 0,
                    }}
                >
                    <ShipmentPanel
                        setCreatingShipment={setIsCreatingShipment}
                        selectShipment={handleSelectShipment}
                        shipments={shipments}
                        selectedShipment={selectedShipment}
                        refreshShipments={fetchAndSetShipments}
                        error={error}
                    />
                </Grid>
                <Grid
                    item
                    xs={12}
                    md={9}
                    sx={{
                        display: 'flex',
                        flexDirection: 'column',
                        flexGrow: 1,
                    }}
                >
                    {renderShipmentContent()}
                </Grid>
            </Grid>
        </Container>
    );
};

export default ShipmentView;