import React, { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";

import DashboardPromptArea from './DashboardPromptArea/DashboardPromptArea';
import DashboardPromptSet from './DashboardPromptSet/DashboardPromptSet';

import styles from './DashboardPrompt.module.css';

const DashboardPrompt: React.FC = () => {
    const [activeTab, setActiveTab] = useState("Prompt Area");
    const [searchParams] = useSearchParams();

    useEffect(() => {
        // If there's an expandedPrompt parameter, switch to the Prompt Set tab
        const expandedPrompt = searchParams.get('expandedPrompt');
        const promptId = searchParams.get('promptId');
        
        if (expandedPrompt) {
            setActiveTab("Prompt Set");
        } else if (promptId) {
            setActiveTab("Prompt Area");
        }
    }, [searchParams]);

    return (
        <div className={ styles.dashboard_prompt }>
            <div className={ styles.prompt_button_div }>
                {["Prompt Area", "Prompt Set"].map((tab) => (
                    <div key={tab} className={styles.buttonWrapper}>
                        <button 
                            key={tab} 
                            className={`${styles.prompt_button} ${activeTab === tab ? styles.prompt_button_active : styles.prompt_button_inactive}`} 
                            onClick={()=> setActiveTab(tab)} >
                            { tab }
                        </button>
                        {activeTab === tab && <div className={styles.horizontalLine}></div>}
                    </div>
                ))}
            </div>
            <div className={styles.horizontalLineLight}></div>
            <div>
                {activeTab === "Prompt Area" ? <DashboardPromptArea /> : <DashboardPromptSet />}
            </div>
        </div>
    )
}

export default DashboardPrompt;