import { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { ResponsiveProvider } from './ResponsiveProvider';
import { Box } from '../Box/Box';
import { useWindowSize } from '../../hooks/useWindowSize/useWindowSize';
import { useBreakpoint } from '../../hooks/useBreakpoint/useBreakpoint';

<Meta
  title="Providers/ResponsiveProvider/Overview"
  component={ResponsiveProvider}
  parameters={{
    controls: { hideNoControlsWarning: true },
  }}
/>

# ResponsiveProvider

Use a `ResponsiveProvider` to provide window size context to all children components. This circumvents the need
to set up individual resize listeners per component when detailed responsive behavior is required.

This component is meant to be used in conjunction with the `useWindowSize` and `useBreakpoint` hooks provided in order to write responsive
markup without diving into CSS.

## Props

<ArgsTable of={ResponsiveProvider} />

## Basic Usage

The `ResponsiveProvider` component can wrap any JSX component but in order to leverage the performance gains of a single context,
it is best to use it once in an application, and placed as high as possible in the component tree (likely wrapping the App itself).

The example below shows basic usage.

**NOTE:** we've included hooks that work in conjuction with this component in order to get
window size data from the provider. the example below uses `useWindowSize`.

<Canvas isExpanded>
  <Story name="Default">
    {() => {
      const App = () => {
        const { innerWidth, innerHeight, outerWidth, outerHeight } = useWindowSize();
        return (
          <Box gap="md">
            <p>Inner Width: {innerWidth}</p>
            <p>Inner Height: {innerHeight}</p>
            <p>Outer Width: {outerWidth}</p>
            <p>Outer Height: {outerHeight}</p>
          </Box>
        );
      };
      return (
        <ResponsiveProvider>
          <App />
        </ResponsiveProvider>
      );
    }}
  </Story>
</Canvas>

## Breakpoints

Our library includes opinionated [breakpoints](?path=/story/design-tokens-design-tokens--page#breakpoints). The `useBreakpoint` hook exposes
these to any component nested under a `ResponsiveProvider`

<Canvas isExpanded>
  <Story name="Breakpoints">
    {() => {
      const App = () => {
        const { isPhone, isTablet, isDesktop, isHd } = useBreakpoint();
        return (
          <Box gap="md">
            <p>phone: {isPhone ? '✅' : '❌'}</p>
            <p>tablet: {isTablet ? '✅' : '❌'}</p>
            <p>desktop: {isDesktop ? '✅' : '❌'}</p>
            <p>hd: {isHd ? '✅' : '❌'}</p>
          </Box>
        );
      };
      return (
        <ResponsiveProvider>
          <App />
        </ResponsiveProvider>
      );
    }}
  </Story>
</Canvas>
