import React, { useEffect, useState } from 'react';
import Checkbox from '@mui/material/Checkbox';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';
import Loading from '../Loading';

const DistinctFilter = ({ model, field, selected, setSelected }) => {
  const [options, setOptions] = useState();

  useEffect(() => {
    model.findMany({
      distinct: [field],
      select: { [field]: true },
      orderBy: { [field]: 'asc' },
    })
      .then(setOptions)
      .catch(console.error);
  }, []);

  if (!options) {
    return <Loading />;
  }

  const handleChange = event => setSelected(
    event.target.checked
      ? selected.concat(event.target.value)
      : selected.filter(item => item !== event.target.value)
  );

  return (
    <div>
      <FormControl component="fieldset">
        <FormGroup row>
          {options.map(option => (
            <FormControlLabel
              key={option[field]}
              control={
                <Checkbox
                  name={field}
                  value={option[field]}
                  checked={selected.includes(option[field])}
                  onChange={handleChange}
                />
              }
              label={option[field]}
            />
          ))}
        </FormGroup>
      </FormControl>
    </div>
  );
};

export default DistinctFilter;