import { Meta, Story, Canvas, Title, Subtitle, Description, ArgsTable, Source } from '@storybook/addon-docs';
import * as stories from './Theme.stories.tsx';
import { Theme } from '@lendi/ui/Theme';

<Meta title="Foundations/Theme/Theme" component={Theme} />

<Title>Theme</Title>
<Subtitle>This component manages Theming and will apply brand specific global assets, tokens, and styling.</Subtitle>

- Theme: Set your theme via `name` prop.
- Global Styles: Will apply some global resets and theme based text colours and fonts.
- Font: Will preload, detect completed font loading and apply the theme's brand font. It will also apply optimal fallback fonts to minimise layout shifting due to Flash of Unstyled Text.
- Favicon: Injects proper favicon assets depending on chosen theme.

<Alert variant="info" heading="Peer Dependency on React Helmet">
  Please ensure you resolve the warning for the React Helmet peer dependency, as this is critical to functionality. We use react helmet to inject themed fonts and favicon.
</Alert>

<Source language='tsx' dark={true} code={`import { Theme } from '@lendi/ui/Theme';`} />

<Canvas>
  <Story name="Theme" story={stories.Interactive} />
</Canvas>


## Usage

Most LUI components having theming capability. But for this to work a project must be wrapped in the `<Theme>` component.

```
import { Theme } from '@lendi/ui/Theme';

const App = () => (
  <Theme name="lendi">
    <YourApp />
  </Theme>
)
```

If you do not have a fixed theme name, you can use auth utils to get it from hostname.

```
import { Theme } from '@lendi/ui/Theme';
import { getBrandFromHostname } from '@lendi/lala-utils'; // Auth Support

export const App = () => {
  // Runtime detection of themeName
  const themeName = getBrandFromHostname(); // 'lendi' | 'domain' | 'aussie'

  return (
    <Theme name={themeName}>
      <YourApp />
    </Theme>
  )
}
```

### Using theme in components
Once you have wrapped your application with the Theme component, you should have access to theme tokens both in js code and styled components

#### With react

```
import { useTheme } from '@lendi/ui/Theme`;

export const SomeComponent = () => {
  const theme = useTheme();

  return (
    <SomeIcon color={theme.color.text.inverse} width="1.5rem" height="1.5rem" />
  );
};
```

#### With styled components

```
const StyledLink = styled.a`
  color: ${({ theme }) => theme.color.interaction.main};
`;
```

<ArgsTable story="Theme" />


## Migration

**We've consolidated LUIProvider back into Theme. Please upgrade to latest Theme & remove LUIProvider.**