import React from 'react'
import { Search } from '@mui/icons-material'
import { IconButton, TextField, InputAdornment } from '@mui/material'
import { GridToolbarDensitySelector, GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton } from '@mui/x-data-grid'
import FlexBetween from './FlexBetween'

const DataGridCustomToolbar = ({ searchInput, setSearchInput, setSearch}) => {
  return (
    <GridToolbarContainer>
        <FlexBetween width="100%">
            <FlexBetween>
                <GridToolbarColumnsButton />
                <GridToolbarDensitySelector slotProps={{ tooltip: { title: 'Change density' } }}/> 
                <GridToolbarExport slotProps={{ tooltip: { title: 'Export data' }, }}/>
            </FlexBetween>
            <TextField label="Search..." sx={{width: "15rem", mt: "1rem"}} onChange={(e) => setSearchInput(e.target.value)} value={searchInput} InputProps={{
                endAdornment: (
                    <InputAdornment position='end'>
                        <IconButton onClick={() => {
                            setSearch(searchInput);
                            setSearchInput("");
                        }}>
                            <Search/>
                        </IconButton>
                    </InputAdornment> 
                )
            }}/>
        </FlexBetween>
    </GridToolbarContainer>
  )
}

export default DataGridCustomToolbar