import React, { useState, useCallback, useMemo } from 'react';
import { Prompt } from '../../hooks/usePrompts';
import styles from './HomeStyles/Dashboard.module.css'
import DashboardChat from '../../components/Dashboard/DashboardChat/DashboardChat';

function Dashboard () {
    const [isChatExpanded, setIsChatExpanded] = useState(false);
    const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
    const [isPromptAreaCollapsed, setIsPromptAreaCollapsed] = useState(false);
    const [currentWorkflowId, setCurrentWorkflowId] = useState<string | null>(null);
    const [workflowCompleted, setWorkflowCompleted] = useState(false);

    const handleChatToggleExpand = () => {
        setIsChatExpanded(!isChatExpanded);
    };

    const handlePromptRun = (prompt: Prompt) => {
        setSelectedPrompt(prompt);
        setIsPromptAreaCollapsed(true);
    };

    const handleWorkflowIdChange = useCallback((workflowId: string | null) => {
        setCurrentWorkflowId(prevId => {
            // Reset completion status when workflow changes
            if (workflowId !== prevId) {
                setWorkflowCompleted(false);
            }
            return workflowId;
        });
    }, [setCurrentWorkflowId, setWorkflowCompleted]);

    const handleWorkflowCompletedChange = useCallback((completed: boolean) => {
        setWorkflowCompleted(completed);
    }, []);

    const handleWorkflowResume = useCallback((workflowId: string) => {
        // Set the workflow ID to resume it
        setCurrentWorkflowId(workflowId);
        // Reset completion status when resuming
        setWorkflowCompleted(false);
        // Switch to Chat Area tab to show the resumed workflow
    }, []);

    // Determine CSS classes based on states


    return (
        <div className={styles.dashboardContainer}> 
            <div className={`${styles.chatLogContainer} ${isChatExpanded ? styles.expanded : ''}`}>
                <div className={styles.chatArea}>
                    <DashboardChat 
                        isExpanded={isChatExpanded} 
                        onToggleExpand={handleChatToggleExpand}
                        selectedPrompt={selectedPrompt}
                        onPromptUsed={() => setSelectedPrompt(null)}
                        onWorkflowIdChange={handleWorkflowIdChange}
                        onWorkflowCompletedChange={handleWorkflowCompletedChange}
                        onWorkflowResume={handleWorkflowResume}
                    />
                </div>
            </div>
        </div>
    );
}

export default Dashboard;