import React from 'react';
import { CircularProgress, Alert, Box } from '@mui/material';
import { ModuleProgressTracker } from './ModuleProgressTracker/ModuleProgressTracker';
import { useProgressTracker } from '../hooks/useProgressTracker';

// TODO PT: Fix "click header to cycle" for criteria marks.

interface RestfulModuleProgressTrackerProps {
    trackerId: number;
    moduleId: number;
    useMockData?: boolean;
    apiBaseUrl?: string;
    rootPartId?: number;
}

export const RestfulModuleProgressTracker = ({
    trackerId,
    moduleId,
    useMockData = false, // todo pt
    apiBaseUrl = '/v1',
    rootPartId
}: RestfulModuleProgressTrackerProps) => {
    // Use our custom hook to manage all state and actions
    const trackerState = useProgressTracker(trackerId, moduleId, useMockData, apiBaseUrl);

    // Show loading state
    if (trackerState.loading) {
        return (
            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '300px' }}>
                <CircularProgress />
            </Box>
        );
    }

    // Show error state
    if (trackerState.error) {
        return (
            <Box sx={{ p: 3 }}>
                <Alert severity="error">{trackerState.error}</Alert>
            </Box>
        );
    }

    // Pass all state and actions to the ModuleProgressTracker component
    return (
        <ModuleProgressTracker
            // All the state and action props are passed from our custom hook
            {...trackerState}
        />
    );
}

export default RestfulModuleProgressTracker;
