"use client";
import style from "./style.module.css";
import { useEffect, useState } from "react";
import { ButtonGroup, IconButton } from "@mui/material";
import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
import SplitscreenOutlinedIcon from "@mui/icons-material/SplitscreenOutlined";
import ButtonPanelItem from "./ButtonPanelItem";
import { ButtonPanelMode, useButtonPanelStore } from "@core/Store/ButtonPanel.Store";

export interface ButtonPanelItem {
    icon: React.ReactNode;
    text: string;
    onClick: () => void;
}

export interface ButtonPanelProps {
    items: ButtonPanelItem[];
    title?: string;
}

export default function ButtonPanel(props: ButtonPanelProps): React.ReactElement {
    const panelMode = useButtonPanelStore();
    const [mode, setMode] = useState<ButtonPanelMode>("button");
    const getClassesNames = () => {
        if (mode === "icon") {
            return style.buttonPanelIcon;
        }

        return style.buttonPanelButton;
    };

    useEffect(() => {
        setMode(panelMode.mode);
    }, [panelMode.mode]);

    return (
        <>
            <div
                style={{
                    display: "flex",
                    flexDirection: "row",
                    justifyContent: "space-between",
                    alignItems: "center",
                }}
            >
                {props.title && <h3>{props.title}</h3>}
                <ButtonGroup
                    variant="outlined"
                    aria-label="Basic button group"
                    sx={{
                        marginRight: "0px",
                        marginLeft: "auto",
                    }}
                >
                    <IconButton onClick={() => panelMode.setMode("icon")}>
                        <GridViewOutlinedIcon
                            sx={{ color: mode === "icon" ? "var(--wine-red)" : "ineherit" }}
                        />
                    </IconButton>
                    <IconButton onClick={() => panelMode.setMode("button")}>
                        <SplitscreenOutlinedIcon
                            sx={{ color: mode === "button" ? "var(--wine-red)" : "ineherit" }}
                        />
                    </IconButton>
                </ButtonGroup>
            </div>

            <div className={getClassesNames()}>
                {props.items.map((item, index) => (
                    <ButtonPanelItem
                        key={index}
                        icon={item.icon}
                        text={item.text}
                        onClick={item.onClick}
                        mode={mode}
                    />
                ))}
            </div>
        </>
    );
}
