import React, { useState } from 'react';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import { useFiltersStyles } from './useFiltersStyles.esm.js';
import { ComboBox } from '../combo-box/ComboBox.esm.js';

const filterFieldIds = [
  "cluster",
  "project",
  "workload",
  "workloadType"
];
function Filters(props) {
  const { onFiltersChange, onFiltersReset, ...filters } = props;
  const classes = useFiltersStyles();
  const [globalKeyId, setGlobalKeyId] = useState(0);
  return /* @__PURE__ */ React.createElement(Box, { className: classes.root }, /* @__PURE__ */ React.createElement(Box, { className: classes.header }, /* @__PURE__ */ React.createElement(Box, { className: classes.value }, "Filters"), /* @__PURE__ */ React.createElement(
    Button,
    {
      color: "primary",
      onClick: (_) => {
        onFiltersReset();
        setGlobalKeyId(globalKeyId + 1);
      }
    },
    "Reset"
  )), /* @__PURE__ */ React.createElement(Box, { className: classes.filters }, filterFieldIds.map((ffid) => /* @__PURE__ */ React.createElement(
    ComboBox,
    {
      multiple: true,
      freeSolo: true,
      selectOnFocus: true,
      clearOnBlur: true,
      handleHomeEndKeys: true,
      filterSelectedOptions: true,
      key: `${ffid}-${globalKeyId}`,
      label: filters[ffid].label,
      options: filters[ffid].options,
      onChange: (_, values) => {
        onFiltersChange(ffid, values);
      }
    }
  ))));
}

export { Filters };
//# sourceMappingURL=Filters.esm.js.map
