"use client";

import SaveIcon from "@mui/icons-material/Save";
import { Box, Button, Typography } from "@mui/material";
import DownloadIcon from "@mui/icons-material/Download";
import { toast } from "react-toastify";
import useTableSetting from "@/lib/hooks/useTableSetting";

function AskForKeepData({ filterData, sortData, user_id, page_name, table_name, columns }) {
    const { filterAction, sortAction } = useTableSetting();

    const onSaveFilter = () => {
        const filteredItems = Object.keys(filterData)
            .map((key) => {
                const value = filterData[key].value;
                if (
                    value !== "" &&
                    !(
                        Array.isArray(value) &&
                        (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === ""))
                    )
                ) {
                    return filterData[key];
                }
            })
            .filter(Boolean);
        filterAction(user_id, page_name, table_name, filteredItems, columns);

        sortAction(user_id, page_name, table_name, sortData, columns);
        toast.dismiss({ containerId: "datatable" });
    };

    const handleDismiss = () => {
        toast.dismiss({ containerId: "datatable" });
    };

    return (
        <Box sx={{ width: "100%" }}>
            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1 }}>
                <Typography color="#155175" variant="subtitle1" sx={{ fontWeight: "500" }}>
                    ذخیره سازی تغییرات
                </Typography>
                <SaveIcon sx={{ color: "#155175" }} />
            </Box>
            <Box sx={{ display: "flex", flexDirection: "column" }}>
                <Typography variant="caption">آیا مایل به ذخیره تغییر های اعمال شده برای دفعات بعد هستید؟</Typography>
            </Box>
            <Box sx={{ display: "flex", gap: 1, mt: 1 }}>
                <Button
                    variant="contained"
                    onClick={handleDismiss}
                    sx={{
                        backgroundColor: "#792626",
                        ":hover": { backgroundColor: "#792626" },
                        boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
                    }}
                >
                    رد کردن
                </Button>
                <Button
                    variant="contained"
                    component="label"
                    endIcon={<DownloadIcon />}
                    onClick={onSaveFilter}
                    sx={{
                        backgroundColor: "#155175",
                        ":hover": { backgroundColor: "#155175" },
                        boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
                    }}
                >
                    ذخیره
                </Button>
            </Box>
        </Box>
    );
}

export default AskForKeepData;
