import { Color, ToolbarMode } from "@/lib/Enums";
import ColorToolbar from "./ColorToolbar";
import styles from "@/styles/DrawBoard/Toolbar.module.css";
import IconButton from "@/components/IconButton";
import BrushRoundedIcon from '@mui/icons-material/BrushRounded';
import AutoFixHighRoundedIcon from '@mui/icons-material/AutoFixHighRounded';
import TextFieldsRoundedIcon from '@mui/icons-material/TextFieldsRounded';
import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
import { useState } from "react";

function Toolbar({
    toolbarMode,
    setToolbarMode,
    color,
    setColor,
    allowWriting = true,
    allowDrawing = true,
    allowImageUpload = true,
}: {
    toolbarMode: ToolbarMode,
    setToolbarMode: (mode: ToolbarMode) => void,
    color: Color,
    setColor: (color: Color) => void,
    allowWriting?: boolean,
    allowDrawing?: boolean,
    allowImageUpload?: boolean,
}) {

    const [expanded, setExpanded] = useState(true);

    return (
        <div className={`${styles.toolbarWrap} ${expanded ? styles.expanded : styles.collapsed}`}>
            {expanded && (
                <div className={styles.toolbarBody}>
                    {allowDrawing && (
                        <IconButton
                            className={`${styles.toolbarButton} ${toolbarMode === ToolbarMode.Draw ? styles.active : ""}`}
                            variant="secondary"
                            onClick={() => setToolbarMode(ToolbarMode.Draw)}
                            icon={BrushRoundedIcon}
                            color={toolbarMode === ToolbarMode.Draw ? "#fff" : undefined}
                        />
                    )}
                    {allowDrawing && <ColorToolbar color={color} setColor={setColor} />}
                    {allowDrawing && (
                        <IconButton
                            className={`${styles.toolbarButton} ${toolbarMode === ToolbarMode.Erase ? styles.active : ""}`}
                            variant="secondary"
                            onClick={() => setToolbarMode(ToolbarMode.Erase)}
                            icon={AutoFixHighRoundedIcon}
                            color={toolbarMode === ToolbarMode.Erase ? "#fff" : undefined}
                        />
                    )}
                    {allowWriting && (
                        <IconButton
                            className={`${styles.toolbarButton} ${toolbarMode === ToolbarMode.Write ? styles.active : ""}`}
                            variant="secondary"
                            onClick={() => setToolbarMode(ToolbarMode.Write)}
                            icon={TextFieldsRoundedIcon}
                            color={toolbarMode === ToolbarMode.Write ? "#fff" : undefined}
                        />
                    )}
                    {allowImageUpload && (
                        <IconButton
                            className={`${styles.toolbarButton} ${toolbarMode === ToolbarMode.Image ? styles.active : ""}`}
                            variant="secondary"
                            onClick={() => setToolbarMode(ToolbarMode.Image)}
                            icon={ImageRoundedIcon}
                            color={toolbarMode === ToolbarMode.Image ? "#fff" : undefined}
                        />
                    )}
                </div>
            )}
            <button
                className={styles.toggleButton}
                onClick={() => setExpanded(prev => !prev)}
                aria-label={expanded ? "Toolbar schließen" : "Toolbar öffnen"}
            >
                {expanded ? "×" : "≡"}
            </button>
        </div>
    );
}

export default Toolbar;