import React, { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import { MdExpandMore, MdExpandLess } from "react-icons/md";

import DashboardPromptSettings from './DashboardPromptSettings/DashboardPromptSettings';
import DashboardPromptSet from './DashboardPromptSet/DashboardPromptSet';
import { Prompt } from '../../../hooks/usePrompts';

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

interface DashboardPromptProps {
    onPromptRun: (prompt: Prompt) => void;
    isCollapsed: boolean;
    onToggleCollapse: () => void;
}

const DashboardPrompt: React.FC<DashboardPromptProps> = ({ 
    onPromptRun, 
    isCollapsed, 
    onToggleCollapse 
}) => {
    const [activeTab, setActiveTab] = useState("Prompt Vorlage");
    const [searchParams] = useSearchParams();

    useEffect(() => {
        const expandedPrompt = searchParams.get('expandedPrompt');
        const promptId = searchParams.get('promptId');
        
        if (expandedPrompt) {
            setActiveTab("Prompt Vorlage");
        } else if (promptId) {
            setActiveTab("Einstellungen");
        }
    }, [searchParams]);

    return (
        <div className={`${styles.dashboard_prompt} ${isCollapsed ? styles.collapsed : ''}`}>
            <div className={ styles.prompt_header }>
                <div className={ styles.prompt_button_div }>
                    {[
                        "Prompt Vorlage", 
                        "Einstellungen"
                    ].map((tab) => (
                        <div key={tab} className={styles.buttonWrapper}>
                            <button 
                                className={`${styles.prompt_button} ${
                                    !isCollapsed 
                                        ? (activeTab === tab ? styles.prompt_button_active : styles.prompt_button_inactive)
                                        : styles.prompt_button_collapsed
                                }`} 
                                onClick={()=> setActiveTab(tab)}
                            >
                                { tab }
                            </button>
                            {!isCollapsed && activeTab === tab && (
                                <div className={styles.horizontalLine}></div>
                            )}
                        </div>
                    ))}
                </div>
                <div 
                    className={styles.expandIcon} 
                    onClick={onToggleCollapse}
                    style={{
                        transform: !isCollapsed ? 'rotate(0deg)' : 'rotate(180deg)',
                        transition: 'transform 0.3s ease'
                    }}
                >
                    <MdExpandLess size={24} />
                </div>
            </div>
            {!isCollapsed && (
                <div className={styles.horizontalLineLight}></div>
            )}
            {!isCollapsed && (
                <div
                    className={styles.content_wrapper}
                    style={{
                        display: "flex",
                        flexDirection: "column",
                        flex: 1,
                        minHeight: 0
                    }}
                >
                    <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
                        {activeTab === "Prompt Vorlage" ? (
                            <DashboardPromptSet onPromptRun={onPromptRun} />
                        ) : (
                            <DashboardPromptSettings />
                        )}
                    </div>
                </div>
            )}
        </div>
    )
}

export default DashboardPrompt;