"use client";

import { Button, Dialog, DialogActions, DialogContent, useMediaQuery } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import Form from "./Form";
import SaveIcon from "@mui/icons-material/Save";
import { LoadingButton } from "@mui/lab";
import { useState } from "react";

const Update = ({ open, setOpen }) => {
    const theme = useTheme();
    const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
    const [loading, setLoading] = useState(false);

    const handleCloseForm = () => {
        setOpen(false);
    };

    return (
        <Dialog fullScreen={fullScreen} maxWidth="sm" fullWidth={true} open={open}>
            <DialogContent dividers>
                <Form handleCloseForm={handleCloseForm} setLoading={setLoading} />
            </DialogContent>
            <DialogActions>
                <Button autoFocus variant="outlined" color="error" size="large" onClick={handleCloseForm}>
                    بستن
                </Button>
                <LoadingButton
                    type="submit"
                    loading={loading}
                    form="UpdateProfile"
                    size="large"
                    autoFocus
                    variant="contained"
                    loadingPosition="end"
                    endIcon={<SaveIcon />}
                >
                    ثبت
                </LoadingButton>
            </DialogActions>
        </Dialog>
    );
};
export default Update;
