import {IconButton, Paper, TextField} from '@mui/material';
import ArtTrackIcon from '@mui/icons-material/ArtTrack';
import {useEffect, useState} from "react";
import FilterBox from "@/components/FilterBox";

const TextFieldWithFnBox = ({formik, id , header,  defaultValue, defaultFilter , columnFilterModeOptions ,onSelectFilter}) => {

    const [anchorEl, setAnchorEl] = useState(null);
    const [open, setOpen] = useState(false);

    useEffect(() => {
        formik.setFieldValue(id, defaultValue || '');
    }, []);

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

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

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

export default TextFieldWithFnBox;