"use client";
import DialogTransition from "@/core/components/DialogTransition";
import { AddCircle, Close } from "@mui/icons-material";
import { Button, Dialog, DialogTitle, IconButton, useMediaQuery } from "@mui/material";
import CreateOrUpdateForm from "../../Forms/CreateOrUpdate";
import { SET_INQUIRE_PRIVACY_FENCING } from "@/core/utils/routes";
import { useState } from "react";
import { useTheme } from "@emotion/react";

const InquiryPrivacyFencingCreate = ({ mutate }) => {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
    const [open, setOpen] = useState(false);

    const handleOpen = () => {
        setOpen(true);
    };

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

    return (
        <>
            {isMobile ? (
                <IconButton aria-label="ایجاد پاسخ به استعلام" color="primary" onClick={handleOpen}>
                    <AddCircle sx={{ fontSize: "25px" }} />
                </IconButton>
            ) : (
                <Button
                    variant="contained"
                    color="primary"
                    startIcon={<AddCircle />}
                    onClick={handleOpen}
                >
                    ایجاد پاسخ به استعلام
                </Button>
            )}
            <Dialog open={open} fullScreen TransitionComponent={DialogTransition}>
                <DialogTitle sx={{ m: 0, p: 2, borderBottom: 1, borderColor: "divider" }} id="create-dialog">
                    ایجاد پاسخ به استعلام
                </DialogTitle>
                <IconButton
                    aria-label="close"
                    onClick={handleClose}
                    sx={{
                        position: "absolute",
                        right: 8,
                        top: 8,
                        color: (theme) => theme.palette.grey[500],
                    }}
                >
                    <Close />
                </IconButton>
                <CreateOrUpdateForm handleClose={handleClose} mutate={mutate} url={SET_INQUIRE_PRIVACY_FENCING} />
            </Dialog>
        </>
    );
};
export default InquiryPrivacyFencingCreate;
