"use client";
import { useFilterStore } from "@store/Filter.Store";
import style from "./Filter.module.css";
import CloseIcon from "@mui/icons-material/Close";
import Button from "../Button/Button";

export default function Filter(): React.ReactElement {
    const menuState = useFilterStore();
    const classData = menuState.visible ? style.filterVisible : style.filterHidden;
    const classBackgroundData = menuState.visible
        ? style.filterBackgroundVisible
        : style.filterBackgroundHidden;

    const toggleMenu = () => {
        menuState.setVisible(!menuState.visible);
    };

    const onFilterHandler = () => {
        if (menuState.onFilter) {
            menuState.onFilter();
        }
        toggleMenu();
    };

    return (
        <>
            <div className={classBackgroundData} onClick={toggleMenu}></div>
            <div className={classData}>
                <div className={style.filterHeader}>
                    <CloseIcon
                        fontSize="large"
                        className={style.filterCloseButton}
                        onClick={toggleMenu}
                    />
                </div>
                <div className={style.filterTitle}>{menuState.title}</div>
                <div className={style.filterOptionsContainer}>
                    {!menuState.filter && <>Sin filtro</>}
                    {menuState.filter && menuState.filter}
                </div>
                <div className={style.filterFooter}>
                    <Button
                        text="Filtrar"
                        color="primary"
                        width="custom"
                        onClick={onFilterHandler}
                        style={{ width: "100px" }}
                    />
                </div>
            </div>
        </>
    );
}
