import {IconButton, TextField} from '@mui/material';
import ArtTrackIcon from '@mui/icons-material/ArtTrack';
import {useEffect, useState} from "react";
import FilterBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/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;
