import {IconButton, Paper, TextField} from '@mui/material';
import AlignHorizontalCenterIcon from '@mui/icons-material/AlignHorizontalCenter';
import {useState} from "react";
// import FilterBox from "@/components/FiterBox";

const TextFieldWithFnBox = ({formik, id ,  defaultFilter , columnFilterModeOptions ,onSelectFilter}) => {
    const [anchorEl, setAnchorEl] = useState(null);
    const [open, setOpen] = useState(false);

    const handleClick = (event) => {
        setOpen((prevOpen) => !prevOpen);
        setAnchorEl(anchorEl ? null : event.currentTarget);
    };

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

    return (
        <>
            <TextField
                name={id}
                label={id}
                id={id}
                value={formik.values[id]}
                onChange={formik.handleChange}
                fullWidth
                margin="normal"
                InputProps={{
                    endAdornment: (
                        <IconButton onClick={handleClick}>
                            <AlignHorizontalCenterIcon />
                        </IconButton>
                    )
                }}
                sx={{
                    position: 'relative'
                }}
            />
            {/*<FilterBox  anchorEl={anchorEl} open={open}  handleClose={handleClose} columnFilterModeOptions={columnFilterModeOptions} onSelectFilter={onSelectFilter}/>*/}
        </>
    );
};

export default TextFieldWithFnBox;