import React from 'react'
import { type Meta, type StoryObj } from '@storybook/react-vite'

import { useWindowSize } from '..'
import { DocsTemplate } from '../../../.storybook'
import OutputForDemo from '../../../.storybook/templates/OutputForDemo'

const WindowSizeTemplate = (args): React.JSX.Element => {
  const { width, height } = useWindowSize(args.ignoreHeaderHeight)
  return (
    <div>
      <span className='text-sm'>
        The width and height dimensions of your browser window. Resize this
        window to see the updated values.
      </span>
      <OutputForDemo
        output={
          <span>
            Width: <b>{width}px</b>, Height: <b>{height}px</b>
          </span>
        }
      />
    </div>
  )
}

export default {
  title: 'Hooks/useWindowSize',
  component: WindowSizeTemplate,
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`
              import { useWindowSize } from '@patterninc/react-ui'

              const containerDimensions = useWindowSize()
              // with an optional arg to pass in to ignore header height calculation useWindowSize(true)

              Output: { width: number, height: number }
            `}
            description='A hook used to get the dimensions of the browser window. By default, we remove the height of our app header height from the calculation of the window height. If this is not wanted, this hook will allow an optional boolean argument that will ignore the header height in the calculation.'
            infoBullets={[
              <span key='first-bullet'>
                <code>useWindowSize</code> is a hook and will run anytime the
                window size is changed.
              </span>,
              <span key='second-bullet'>
                This hook give you access to the <code>width</code> and{' '}
                <code>height</code> of the browser window.
              </span>,
              <span key='third-bullet'>
                If you do not want the app's header height to be part of the
                calculation, pass in <code>true</code> to the hook.
              </span>,
            ]}
            noArgs
          />
        </>
      ),
    },
  },
} as Meta<typeof WindowSizeTemplate>

type Story = StoryObj<typeof WindowSizeTemplate>

const Template: Story = {
  render: (args) => <WindowSizeTemplate {...args} />,
}

export const Basic: Story = {
  ...Template,
  args: {},
}

export const IgnoreHeaderHeight: Story = {
  ...Template,
  args: {
    ignoreHeaderHeight: true,
  },
}