import React from 'react';
import PropTypes from 'prop-types';
import { CheckBoxRounded, IndeterminateCheckBoxRounded } from '@mui/icons-material';

import { Autocomplete, MenuItem, Select, Stack, TextField, Typography } from '@/mui/components';

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

function Filter(props) {
  return (
    <div className={styles.Filter}>
      <Typography variant="caption" color="text.primary" fontWeight={400}>
        {props.label}
      </Typography>

      <div className={styles.Controls}>
        <Select
          className={styles.Select}
          size="small"
          labelId={`${props.label}-select-label`}
          id={`${props.label}-select`}
          fullWidth={false}
          value={props.action}
          onChange={(event) => {
            props.onChangeAction(event.target.value);
          }}
          disabled={props.disabled}
        >
          {[
            {
              key: 'INCLUDE',
              title: 'Include',
              color: 'success.main',
              icon: CheckBoxRounded,
            },
            {
              key: 'EXCLUDE',
              title: 'Exclude',
              color: 'shades.600',
              icon: IndeterminateCheckBoxRounded,
            },
          ].map((item) => {
            const Icon = item.icon;

            return (
              <MenuItem key={item.key} value={item.key}>
                <Stack spacing={1} direction="row" alignItems="center">
                  <Icon fontSize="small" htmlColor={item.color} />
                  <span>{item.title}</span>
                </Stack>
              </MenuItem>
            );
          })}
        </Select>

        <Autocomplete
          className={styles.Autocomplete}
          multiple={props.multiple}
          size="small"
          data-id={`${props.label}-autocomplete`}
          id={`${props.label}-autocomplete`}
          options={props.options}
          onChange={(e, newValue) => {
            props.onChange(newValue);
          }}
          value={props.values}
          renderInput={(params) => (
            <TextField
              {...params}
              placeholder={`Search ${props.label}`}
              onChange={(e) => {
                if (props.onInputChange) {
                  props.onInputChange(e.target.value, props.name);
                }
              }}
              variant="outlined"
              fullWidth
            />
          )}
          limitTags={1}
          disabled={props.disabled}
          disableCloseOnSelect
          filterSelectedOptions
        />
      </div>
    </div>
  );
}

Filter.propTypes = {
  label: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  multiple: PropTypes.bool,
  options: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  values: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  action: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  onInputChange: PropTypes.func.isRequired,
  onChangeAction: PropTypes.func.isRequired,
  disabled: PropTypes.bool.isRequired,
};

export default Filter;
