import AddIcon from "@mui/icons-material/Add";
import { Fab } from "@mui/material";
import { WeightForm } from "@/components/Weight/forms/WeightForm";
import { WgerModal } from "@/core/ui/Modals/WgerModal";
import { useState } from "react";
import { useTranslation } from "react-i18next";

export const AddBodyWeightEntryFab = () => {
    const [t] = useTranslation();
    const [openModal, setOpenModal] = useState(false);
    const handleOpenModal = () => setOpenModal(true);
    const handleCloseModal = () => setOpenModal(false);

    return (
        <div>
            <Fab
                color="secondary"
                aria-label="add"
                onClick={handleOpenModal}
                sx={{
                    position: 'fixed',
                    bottom: '5rem',
                    right: (theme) => `max(${theme.spacing(2)}, calc((100vw - ${theme.breakpoints.values.lg}px) / 2 + ${theme.spacing(2)}))`,
                    zIndex: 9,
                }}>
                <AddIcon />
            </Fab>
            <WgerModal title={t('add')} isOpen={openModal} closeFn={handleCloseModal}>
                <WeightForm closeFn={handleCloseModal} />
            </WgerModal>
        </div>
    );
};