import React from 'react';
import PropTypes from 'prop-types';
import { Add, FilterAlt, SearchRounded, Settings } from '@mui/icons-material';

import { BULK_ACTIONS, STATUS_FILTERS } from '../../constants';

import { Button, FormControl, IconButton, InputAdornment, MenuItem, Select, Stack, TextField } from '@/mui/components';

import styles from './Filters.module.scss';

function Filters(props) {
  return (
    <Stack fullWidth direction="row" alignItems="center" justifyContent="space-between">
      <Stack direction="row" alignItems="center" justifyContent="flex-start">
        <div className={styles.SearchFieldWrapper}>
          <TextField
            id="search"
            value={props.search}
            onChange={(event) => {
              props.setField({
                search: event.target.value,
                page: 0,
              });
              props.fetchData(event.target.value);
            }}
            placeholder="Search"
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton onClick={() => null}>
                    <SearchRounded />
                  </IconButton>
                </InputAdornment>
              ),
            }}
            variant="outlined"
            size="small"
          />
        </div>
        <div className={styles.Filters}>
          <IconButton size="small" onClick={() => null} readOnly>
            <FilterAlt />
          </IconButton>
        </div>
        <FormControl variant="outlined" size="small">
          <Select
            id="status-filter"
            value={props.filterStatus}
            onChange={(event) => {
              props.setField({
                status: event.target.value,
                page: 0,
              });
              props.fetchData();
            }}
            size="small"
            displayEmpty
          >
            {STATUS_FILTERS.map((item) => (
              <MenuItem key={item.value} value={item.value}>
                {item.label}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Stack>
      <Stack direction="row" fullWidth justifyContent="flex-end" alignItems="center">
        <FormControl variant="outlined" size="small">
          <Select
            id="bulk-actions"
            size="small"
            value=""
            displayEmpty
            inputProps={{ 'aria-label': 'Without label' }}
            startAdornment={
              <InputAdornment position="start">
                <IconButton size="small" onClick={() => null}>
                  <Settings />
                </IconButton>
              </InputAdornment>
            }
          >
            <MenuItem value="" disabled className={styles.DefaultSelectProp}>
              Bulk Actions
            </MenuItem>
            {BULK_ACTIONS.map((item) => (
              <MenuItem
                key={item.value}
                value={item.value}
                disabled={props.disabledBulk}
                onClick={() => {
                  props.handleBulkUpdate(item.value);
                }}
              >
                {item.label}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

        <Button
          className={styles.PlusButton}
          variant="contained"
          color="primary"
          size="small"
          data-id="plusButton"
          onClick={props.onCreateNew}
          startIcon={<Add />}
        >
          {props.addButtonText}
        </Button>
      </Stack>
    </Stack>
  );
}

Filters.propTypes = {
  search: PropTypes.string.isRequired,
  filterStatus: PropTypes.string.isRequired,
  setField: PropTypes.func.isRequired,
  disabledBulk: PropTypes.bool.isRequired,
  addButtonText: PropTypes.string.isRequired,

  handleBulkUpdate: PropTypes.func.isRequired,
  onCreateNew: PropTypes.func.isRequired,
  fetchData: PropTypes.func.isRequired,
};

export default Filters;
