{/* prettier-ignore */}
{/*
Copyright 2023 Comcast Cable Communications Management, LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

SPDX-License-Identifier: Apache-2.0
\*/}

import { Meta } from '@storybook/blocks';
import * as withHandleKeyStories from './withHandleKey.stories';

<Meta of={withHandleKeyStories} />

# withHandleKey

The `withHandleKey` mixin can be wrapped around a parent component to handle key events and also to take advantage of the
global `keyMetricsCallbackHandler` in the lightning UI Context.

## Source

https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/mixins/withHandleKey/index.js

## Usage

Out of the box, `withHandleKey` adds a generic \_handleKey & \_handleKeyRelease function and calls the corresponding `on{Key}` handler. If no key handler is found, it fires an `$on{Key}` & `$on${Key}Release` event.

Additionally, if a `metricsPayload` is defined, the global `keyMetricsCallbackHandler` in Context will be invoked with
the given `metricsPayload`.

```js
class Example extends lng.Component {
  static _template() {
    return {
      MyTile: {
        type: Tile,
        onArrowUp: (targetElm, keyEvent) => {
          console.log('Up');
        },
        onArrowDown: (targetElm, keyEvent) => {
          console.log('Down');
        },
        metricsPayload: {
          buttonName: 'arrowUp',
          uniqueId: 'unique-123'
        }
      }
    };
  }

  $onEnter(item, keyEvent) {
    console.log('Child component entered: ', item);
  }
}
```

Take a look at the preview above. Tile component is using the withHandleKey mixin.
If you press enter on the first tile, you should see it print a metrics payload in the console (inspector view)
In this example, Tile extends `withHandleKey` and allows dynamically adding `on${Key}` functions or event listener for `$on{key}`.

Example below - an metricPayload is provided, which will be invoked when any key is handled, with the payload
`metricsPayload: { buttonName: 'arrowUp', uniqueId: 'unique-123' }`
