import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput } from '../../../../../tools/docTools';
import { headerHomeBarDataMock, headerHomeBarSettingsMock } from '../../../../../../mocks/components/header';
import HeaderHomeBar from '../HeaderHomeBar';
import { configUserLoggedInMock } from '../../../../../../mocks/config';

export const settingsDocs = {};

<Meta
    title="Global Components/Header/Atoms/Header Home Bar"
    component={HeaderHomeBar}
    parameters={{
        layout: 'fullscreen'
    }}
/>

# HeaderHomeBar
<br />

## `HeaderHomeBar` are used to display the logo, search bar, and quick links.
<br />

### Default
<Canvas>
    <Story name="Default">
        <HeaderHomeBar
            data={headerHomeBarDataMock}
            settings={headerHomeBarSettingsMock}
        />
    </Story>
</Canvas>

### With search bar
<Canvas>
    <Story name="With Search Bar">
        <HeaderHomeBar
            data={headerHomeBarDataMock}
            settings={getKnobs(HeaderHomeBar.schema().form)}
            displaySearchBar
        />
    </Story>
</Canvas>

### With user logged in
<Canvas>
    <Story name="With user logged in">
        <HeaderHomeBar
            data={{
                ...headerHomeBarDataMock,
                user: configUserLoggedInMock.user
            }}
            settings={getKnobs(HeaderHomeBar.schema().form)}
            displaySearchBar
        />
    </Story>
</Canvas>

## Usage Example
```jsx
import HeaderHomeBar from '@appdirect/sfb-theme-components/src/components/header/atoms/header-home-bar/HeaderHomeBar';

<HeaderHomeBar />
```

## Props
<ArgsTable of={HeaderHomeBar} />

## Schema
### Form Settings
<table>
    <TableContentFromObject obj={settingsDocs} />
</table>

### Form Output
<FormOutput code={HeaderHomeBar.schema().form} />
