# SearchKeyControl

A component that renders a group of checkboxes allowing users to select one or more search keys (indexes). It synchronizes its state with the `qIndex` URL parameter (managed via the `useQIndex` hook), updating this parameter by injecting or removing individual keys based on user interactions.

> **Note:** This component is **controlled by the `qIndex` URL parameter** rather than external props like `value` or `onChange`. When users interact with checkboxes, the component modifies the `qIndex` by adding or removing search keys accordingly. It **does not** replace the entire `qIndex` value.

---

## Basic Usage

Provide an `options` array with each search key to be rendered. Each option includes a `key`, a display `label`, and optionally, an `indexes` array to represent multiple underlying sub-indexes.

```jsx
import { SearchKeyControl } from '@k-int/stripes-kint-components';

const MySearchForm = () => {
  const searchKeyOptions = [
    { key: 'keyword', label: 'Keyword' },
    { key: 'title', label: 'Title' },
    { key: 'author', label: 'Author' },
    {
      key: 'subjectPlus',
      label: 'Subject (incl. subdivisions)',
      indexes: ['subject', 'subdivision']
    }
  ];

  return (
    <div>
      <label>Search Indexes:</label>
      <SearchKeyControl options={searchKeyOptions} />
    </div>
  );
};

export default MySearchForm;
```

In this example:

* **Checkboxes** are rendered for each `key`, including the composite `subjectPlus`.
* The `qIndex` URL parameter (e.g. `?qIndex=title,author`) determines the checked state.
* Clicking a checkbox adds or removes the relevant index or indexes:

    * For simple entries like `"title"`, toggling directly modifies `qIndex`.
    * For composite entries like `"subjectPlus"`, checking adds both `"subject"` and `"subdivision"`; unchecking removes both.
* **Pagination is reset** automatically via `usePrevNextPagination()` when the `qIndex` changes.

---

## Props

| Name      | Type              | Description                                                                                                                                                                                                                                                                                 | Default | Required |
| :-------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------- |
| `options` | `arrayOf(object)` | Array of search key definitions. Each object must include:<br>• `key` (string): A unique identifier.<br>• `label` (string \| node): The displayed label.<br>• `indexes` (array of strings, optional): One or more sub-indexes that this checkbox controls (defaults to `[key]` if omitted). | `[]`    | ✕        |

---

## How It Works

### 1. Reading Search Index State

The component uses `useQIndex()` to retrieve and manage the `qIndex` URL parameter. The value is split into an array of active keys (`qIndexArray`), trimmed for whitespace and memoized.

### 2. Creating Internal State

A `keyState` object maps each option's `key` to:

* `inUse`: A boolean indicating whether all of the entry’s `indexes` are present in `qIndexArray`.
* `label`: The label to display next to the checkbox.
* `subIndexes`: The underlying `indexes` array (or `[key]` if not specified).

This mapping is memoized via `useCallback()` and kept in sync with URL state using `useEffect()`.

### 3. Rendering Checkboxes

Each `keyState` entry is rendered as a checkbox using `@folio/stripes/components`' `Checkbox`. Its `checked` state is tied to `inUse`, and its `label` comes from the `label` field.

### 4. Handling Changes

On user interaction:

* If a checkbox is checked:

    * The component **adds** all `subIndexes` for the key to the `qIndexArray`.
* If a checkbox is unchecked:

    * The component **removes** all `subIndexes` for the key from `qIndexArray`.

The updated array is joined back into a comma-separated string and passed to `setQIndex()` to update the URL.

### 5. Pagination Reset

If the current page is non-zero (via `usePrevNextPagination`), the component calls `resetPage()` after modifying `qIndex`. This ensures consistency in result navigation after a filter change.