{/* 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, Title } from '@storybook/blocks';
import { DocsLink } from '../../docs/utils';
import * as TabBarStories from './TabBar.stories';

<Meta of={TabBarStories} />

<Title />

Tab navigation between groups of content.

## Source

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

## Usage

`TabBar` renders a row of tabs and displays the contents for each tab when it is selected. The recommended component
to render for each tab is the [Tab](/docs/components-tab--basic) component, however custom implementations of tab components is also supported.
The component rendered as content for each tab is set via a `tabContent` property on each tab.

```js
import { TabBar, Tab, Row } from '@lightningjs/ui-components';

class Example extends lng.Component {
  static _template() {
    return {
      TabBar: {
        type: TabBar,
        tabs: [
          // tab with no tabContent
          {
            type: Tab,
            title: 'Tab Item 1'
          },
          // set tabContent via a component
          {
            type: Tab,
            title: 'Tab Item 2',
            tabContent: {
              type: Row,
              items: rowItemsForTab2
            }
          },
          // set tabContent via a function which returns a component
          {
            type: Tab,
            title: 'Tab Item 3',
            tabContent: () => {
              return {
                type: Row,
                items: rowItemsForTab3
              };
            }
          },
          // set tabContent via an asynchronous function which returns a component
          {
            type: Tab,
            title: 'Tab Item 4',
            tabContent: () => {
              return new Promise(resolve => {
                resolve({
                  type: Row,
                  items: rowItemsForTab2
                });
              });
            }
          }
        ]
      }
    };
  }

  $tabChanged(selectedTab) {
    console.log(selectedTab.title);
  }
}
```

### Properties

| name             | type                                                    | required | default | description                                                                                                                                                                                                                                                                                                                   |
| ---------------- | ------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| alphaSelectedTab | boolean                                                 | false    | false   | when `true`, a lower alpha will be applied to unselected tabs when focus is delegated to the tab content                                                                                                                                                                                                                      |
| collapse         | boolean                                                 | false    | false   | when `true`, the height of the `TabBar` will only reflect the height of the `Tabs` when unfocused or no tab content is available                                                                                                                                                                                              |
| reset            | boolean                                                 | false    | false   | when `true`, the selected tab index will be reset when the `TabBar` component is unfocused                                                                                                                                                                                                                                    |
| tabs             | <DocsLink id="lng.Component">lng.Component[]</DocsLink> | true     | -       | The content displayed when a tab is selected is configured via a tabContent property on each tab in the tabs array. If tabContent is undefined on a tab, nothing will be displayed when that tab is selected. TabContent accepts a component, a function which returns a component, or a promise that resolves to a component |
| wrapSelected     | boolean                                                 | false    | false   | enables wrapping behavior, so `selectNext` selects the first item if the current item is the last on the list and vice versa                                                                                                                                                                                                  |

\* `TabBar` also accepts all properties supported by the [Row](/docs/components-row--basic) component. These properties will be applied to the Row which renders the Tabs

### Signals

- `$tabChanged`: each time the selected tab is changed, a signal named `$tabChanged` is emitted (via `fireAncestors`) with 3 arguments in the following order: the current selected tab, the previously selected tab, and an instance of the TabBar component

```js
fireAncestors('$tabChanged', selected, prevSelected, this);
```

### Style Properties

| name             | type   | description                                  |
| ---------------- | ------ | -------------------------------------------- |
| tabsMarginBottom | number | vertical margin between tabs and tab content |
| tabSpacing       | number | pixels between each tab component            |
